jquery - 无法从 File API 检索文件

Question

好的，我正在尝试使用 File 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

改变：

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

到：

uploadAvatar(this.files[0]);

jQuery 对象没有files属性。

Answer 2

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

Answer 3

阅读文件是一种浪费。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]);
});