javascript - 如何从 FileList 中拼接选定的元素

Question

使用 javascript 中的 fileReader 预览选定的文件

if i remove from previewed image. it must delete from selected files!

$scope.getFile = function () {
    $scope.progress = 0;
    $scope.variant.images = [];
    var files = $scope.file;
    for ( var i = 0; i < files.length; i++) {
        var file = files[i];
        fileReader.readAsDataUrl(file, $scope).then(function(result) {
            $scope.variant.images.push({path: result})


        });
    }
};

我试过了，但是不行

angular.forEach($scope.file, function (value, key) {
        if(key === id){
            delete value;
        }
    })

Answer 1

你不能拼接 FileList .它是只读的!它只有 length和 item但没有像 splice', 'split 这样的数组逻辑., 等。所以你必须在一个数组中从它制作一个副本:

// **A**
$scope.fileArray = [];
angular.forEach($scope.file, function(file) {
    $scope.fileArray.push(file)
});

然后你可以用类似的东西从这个数组中拼接:

$scope.deleteImage = function(index) {
   $scope.fileArray.splice(index, 1);
})

正如您提到的“预览”，我猜您正在显示所选图像的缩略图。您还必须更改任何显示逻辑才能使用 fileArray而不是当前的 file .因此，当用户删除一个元素时它会自动更新。

<div ng-repeat="image in fileArray"... >

所以最好设置一个 Angular 表来重新计算$scope.fileArray如上所述。但是恐怕你不能在文件列表上做 $watch 。不确定，但我最近发现 Angular 不支持 ng-model在 <input type="file" 上.我在 this article 中找到了解决方案.

所以如果一个简单的 $scope.$watch('file', function..不起作用，您最好使用 fileModel 导入将该指令添加到您的系统中，并用它增强您 View 中的文件输入:

<input type="file" name="files" file-model="filesArray" multiple accept="image"/>

然后您应该能够看到您分配给它的 filesArray:

$scope.$watch('fileArray', function() {
    // Code from **A**
    ....
});