Question

我正在上传多张图片。选择图像后，它会显示在一个带有删除按钮的列表中。我成功地从范围中删除了图像（文件名），但我无法从文件上传器或FormData中删除特定数据（即存储上传数据的js对象）。

视图看起来像这样

我的js文件

angular.module('fupApp', [])
.directive('ngFiles', ['$parse', function ($parse) {
    function fn_link(scope, element, attrs) {

        var onchange = $parse(attrs.ngFiles);
        element.on('change', function (event) {
            onchange(scope, { $files: event.target.files });
        })
    }
    return {
        link: fn_link

    }

}])

.controller('fupController', function ($scope, $http) {
    var formdata = new FormData();
    $scope.imagesrc = [];
    $scope.getTheFiles = function ($files) {
        for (var i = 0; i < $files.length; i++) {
            var reader = new FileReader();
            reader.fileName = $files[i].name;
            reader.onload = function (event) {
                var image = {};
                image.Name = event.target.fileName;
                image.Size = (event.total / 1024).toFixed(2);
                image.Src = event.target.result;
                $scope.imagesrc.push(image);
                $scope.$apply();

            }
            reader.readAsDataURL($files[i]);
        }
        angular.forEach($files, function (value, key) {
            formdata.append(key, value);
        })
    }
    $scope.deleteTempImage = function (idx) {

        $scope.imagesrc.splice(idx, 1);


      -->>>> how to delete the specific data from formdata in here??????????


        alert("deleted");
    }

        $scope.uploadFiles = function () {
            var request = {
                method: 'POST',
                url: '/api/FileUpload',
                data: formdata,
                headers: {
                    'Content-Type': undefined
                }
            };
            $http(request).success(function (d) {
                alert(d);
            }).error(function () {
                alert("Failed");
                $scope.reset();
            })
        }

        $scope.reset = function () {

            angular.forEach(
                angular.element("input [type='file']"),
                function (inputElem) {
                    angular.element(inputElem).val(null);

                }

                );
            $scope.imagesrc = [];
            formdata = new FormData();
        }

    })

这是我的观点

<div ng-app="fupApp" ng-controller="fupController">
     <div class="container">
         <div class="panel panel-info">
             <div class="panel-heading">
                 Photos
             </div>
             <div class="panel-body">
                 <table class="table table-hover table-boardered">
                     <thead>
                         <tr>
                             <td >Title</td>
                             <td>Image</td>
                             <td>Size</td>
                         </tr>

                     </thead>
                     <tbody>
                         <tr ng-repeat="image in imagesrc track by $index">
                             <td>{{image.Name}}</td>
                             <td>
                                 <img ng-src="{{image.Src}}" title="{{image.Name}}" style="width:100px" />
                            </td>
                             <td>{{image.Size}}</td>
                             <td><input type="button" class="btn btn-success " ng-click="deleteTempImage($index)" value="delete" />
                         </td>
                         </tr>
                     </tbody>

                 </table>
                 <div class="row">
                     <div class="col-lg-7">
                         <input type="file" multiple ng-files="getTheFiles($files)"/>
                     </div>
                     <div class="col-lg-5">
                         <input ng-disabled="!imagesrc.length" type="button" class="btn btn-success" ng-click="uploadFiles()" value="Upload" />
                         <input ng-disabled="!imagesrc.length"  type="button" class="btn btn-success" ng-click="reset()" value="Cancel" />
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </div>

这里的问题是在我按下上传后我选择的所有图像上传。正如您所看到的，图像中显示了6个文件，但我已经删除了两个图像，但是当我点击上传时，所有图像都会保存，包括之前删除的图像。

将会感谢任何帮助，以防止保存不需要的图像。我仍在学习AngularJS所以请帮忙。

谢谢。

UPDATE（解决）

这解决了我的问题。我传递了文件以及索引

<input type="button" class="btn btn-success " ng-click="deleteTempImage($index,image)" value="delete" />

然后我删除了我的formdata中的特定项目。

 $scope.deleteTempImage = function (idx,image) {
        debugger;
        $scope.imagesrc.splice(idx, 1);
        formdata.delete(idx, image);
        alert("deleted");
    }

无论如何，谢谢你指导我。

Answer 1

您可以使用OceanLifeView(String title, int type) { if(...) { ... }else if (title.equals("fileChooser")) { fileChooser = new JFileChooser(); fileChooser.setFileSelectionMode(FILES_ONLY); if (type == 0) { //Load Button functions System.out.println("De-Serialisation started fileChooserGUI!"); returnVal = fileChooser.showOpenDialog(fileChooser); } else { //Save Button functions System.out.println("Serialisation started fileChooserGUI!"); returnVal = fileChooser.showSaveDialog(fileChooser); } if (returnVal == JFileChooser.APPROVE_OPTION) { filePath = fileChooser.getSelectedFile(); } } } .delete()方法从FormData对象中移除项目

＆＃13;

FormData

＆＃13;

Answer 2

您正在移除ypur上传代码中的项目表单对象列表您是sendig formData文件仍然存在的位置。你需要像这样删除它。 PS。此原始代码根据您的要求进行修改。

  $scope.deleteTempImage = function(idx) {

if(formData.has('yourKey-$files.key')) 
{
formData.delete('yourKey-$files.key');
alert("deleted");
}

}

使用Angular JS从asp.net MVC中的文件上传器中删除特定的图像文件

2 个答案: