jquery - 无法从 File API 检索文件

Question

好的，我正在尝试使用文件 API 和 jQuery 显示图像缩略图。我从我的谷歌搜索中阅读了大量教程，从我读到的内容来看，这段代码应该可以工作:

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

关于我做错了什么有什么想法吗？

Answer 1

files 是文件输入元素本身的属性，而不是 jQuery 对象，使用 uploadAvatar(this.files[0]); 而不是 uploadAvatar( $(this).files[0]);