Question

我使用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" />

SCRIPT：

$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');
     }

当我从上传对话框中选择文件时，此工作正常。但是，当我点击“取消”或退出上传者而不选择任何文件时，我会收到以下错误。

未捕获的TypeError：无法在'FileReader'上执行'readAsDataURL'：参数1不是'Blob'类型。

如何解决这个问题??

Answer 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]);                    
        }
 }

Answer 2

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

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

如果没有更多代码，我们无法猜出更准确的答案......

没有选择文件，FileReader无法工作

2 个答案: