如何从FileList拼接选定的元素

Question

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

  

如果我从预览图片中删除。它必须从选定的文件中删除！

$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

您可以使用本机JS Array＃forEach函数，因为它可以访问数组中对象的索引。

我使用id假设您实际上将id传递给函数以识别需要从数组中删除的对象。看看上面的代码，name似乎更理想，如果那是对象中的唯一属性

$scope.file.forEach(function(file, index){

    if (file.id === id){ // Where id is your identifier, could be file.name === name.
        this.splice(index, 1);
    }

});

Answer 2

你不能拼接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);
})

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

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

最好设置一个角度表来重新计算上面给出的$scope.fileArray。但是，我担心你不能在文件列表上进行$ watch。不确定，但我最近发现Angular不支持ng-model上的<input type="file"。我在this article找到了解决方法。

因此，如果一个简单的$scope.$watch('file', function..无法正常工作，那么您最好在其中使用fileModel指令进入您的系统并使用它增强视图中的文件输入：

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

然后你应该能够看到你分配给它的filesArray：

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