Question

我的设置如下：

   singleFileUploads: false,
    // To limit the number of files uploaded with one XHR request,
    // set the following option to an integer greater than 0:
    limitMultiFileUploads: undefined,
    maxNumberOfFiles: 1,

我试图让我的客户在成功上传此图片后上传个人图片，我想重置文件选择，并允许我的用户上传另一张图片而不是第一张图片。

在将maxNumberOfFiles设置为1之前，插件只是尝试上传用户将选择的新文件以及旧文件，现在，它允许用户每次访问页面时只上传一次文件包含插件实例。

这是我到目前为止所尝试的内容：

$scope.model.resetFiles = function(){
    angular.forEach(
        angular.element("input[type='file']"),
        function(inputElem){
          // angular.element(inputElem).val(null);
          angular.element(inputElem).find('.files').empty();    
         angular.element(inputElem).scope().clear()
    });
}

Answer 1

出于安全原因，Javascript不允许您以您认为的方式清除文件字段。看起来好像创建一个新元素并替换旧文件字段就可以了。查看this link以获取更多详细信息和代码示例。

我见过有人建议将元素包装在<form>标记中并使用jQuery的reset()函数重置表单，但是如果你没有使用完整版的jQuery，我不会我相信这包含在AngularJS默认使用的jqLite中。

Answer 2

我找到了一个临时解决方案，直到插件更新以获得更好的Angular支持。

var filePicker = null;

$scope.options = {
    done: function (e, data) {
        filePicker = data;
    }
};

$scope.clearFiles = function () {
    filePicker.scope.clear(filePicker.files);
};

只需将选项添加到指令中，如下所示：

<form file-upload="options" action="import/excelupload" method="POST" enctype="multipart/form-data">

Answer 3

我只是使用这个简单的表格重置来解决它

document.forms["mediaUploader"].reset();

我对文件输入的指令是将文件自动绑定到范围变量。在调用forms.reset（）之后;还将files.length自动绑定到0，这样可以很有效！

也退房 https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement.reset

Answer 4

如果文件字段包含在表单标记内，则使用标准的html表单重置按钮类型。

<button type="reset" value="Reset">Reset</button>

此外，您可以在重置按钮上放置ng-click指令以执行$ scope中的任何更改。

<button type="reset" value="Reset" ng-click="formReset()">Reset</button>

$scope.resetForm = function (){

    // Your business logic after form reset.   

}

使用blueimp插件和AngularJS上传单个文件重置文件选择

4 个答案: