2

File API と jQuery を使用して画像のサムネイルを表示しようとしています。Google検索から大量のチュートリアルを読みましたが、読んだことから、このコードは機能するはずです:

Javascript

$(document).ready(function(){
    function uploadAvatar( file ) {
        var preview = $('#newUserProfile .avatar img');
        var reader = new FileReader();

        reader.onload = function(e){
            preview.attr('src', e.target.result);
        };

        reader.readAsDataURL(file);
    }

    $('input#imageUpload').change(function(){
        uploadAvatar($(this).files[0]);
    });
});

HTML

<form>
    <input type="file" id="imageUpload" />
</form>
<div id="newUserProfile">
    <div class="avatar">
        <img src="" />
    </div>
</div>

ただし、次のエラーが返されます。

Uncaught TypeError: Cannot read property '0' of undefined    -> newUser.js
  (anonymous function)                                       -> newUser.js
  p.event.dispatch                                           -> jquery.min.js
  g.handle.h                                                 -> jquery.min.js

私が間違っていることについてのアイデアはありますか？

4

3 に答える 3

1

変化する：

uploadAvatar($(this).files[0]);

に：

uploadAvatar(this.files[0]);

jQuery オブジェクトにはfilesプロパティがありません。

于 2012-10-01T20:00:26.573 に答える
1

filesファイル入力要素自体のプロパティであり、jQuery オブジェクトではありません。uploadAvatar(this.files[0]);代わりに使用しますuploadAvatar($(this).files[0]);

于 2012-10-01T20:01:08.997 に答える
1

ファイルを読むのはもったいない。Base64 エンコーディングでは、ファイル サイズに 33% のオーバーヘッドが生じます。代わりにblob:、ファイル オブジェクトから URL を作成するだけです。それはより効率的です：

window.URL = window.URL || window.webkitURL;

function uploadAvatar(file) {
  var url = window.URL.createObjectURL(file);
  $('#newUserProfile .avatar img').attr('src', url);
}

$('input#imageUpload').change(function(){
  uploadAvatar(this.files[0]);
});
于 2012-10-03T02:28:18.573 に答える