如果不选择文件，FileReader 将无法工作答案

【问题标题】：FileReader doesnot work without choosing a file如果不选择文件，FileReader 将无法工作
【发布时间】：2015-07-11 12:11:52
【问题描述】：

我使用 FileReader 使用 javascript 读取选定的文件。这是代码

HTML：

<img id="preview" ng-src="{{user_picture}}" ng-click="triggerUpload()" alt="" width="160" height="160" class="img-thumbnail" />
<input type="file" onchange="angular.element(this).scope().viewImage(this.files)" accept="image/jpg,image/jpeg,image/png" id="fileInput" name="filedata" />

脚本：

$scope.triggerUpload = function () {
    show_image();
}

$scope.list = [];
$scope.viewImage = function (file) {
     show_image(file);        
}



    function show_image(image) { 
        var fileuploader = angular.element("#fileInput");
        fileuploader.on('click', function () {           
            if (image && image[0]) {
                 var reader = new FileReader();            
                 reader.onload = function (e) {
                     $('#preview').attr('src', e.target.result);
                  }
                 reader.readAsDataURL(this.files[0]);                    
               }
             })
        fileuploader.trigger('click');
     }

当我从上传对话框中选择一个文件时，这可以正常工作。但是，当我点击“取消”或在不选择任何文件的情况下退出上传程序时，会出现以下错误。

未捕获的类型错误：无法在“FileReader”上执行“readAsDataURL”：参数 1 不是“Blob”类型。

如何解决这个问题？？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

如何解决这个问题？？

当用户选择取消时不要调用show_image

function show_image(image) {            
        if (image && image[0] && this.files.length) {
            var reader = new FileReader();            
            reader.onload = function (e) {
                $('#preview').attr('src', e.target.result);
            }
            reader.readAsDataURL(this.files[0]);                    
        }
 }

【讨论】：

【解决方案2】：

上面的条件检查image && image[0]，它（如果我们的猜测是正确的，没有更多的代码来解释它）检查这个变量是否为非空。

但是，您在this.files[0] 上调用readAsDataURL()；此变量与image 无关，很可能您没有设置它，或者当用户按下取消时它不是文件名。

没有更多代码，我们无法猜测出更准确的答案……

【讨论】：