blueimp jquery-file-upload如何在上传前取消1个文件

时间:2014-02-26 20:07:12

标签: javascript jquery file-upload blueimp

我正在使用以下库 https://github.com/blueimp/jQuery-File-Upload/wiki

我选择了(添加文件)按钮后显示所选文件。我没有显示显示取消按钮或上传的演示网格

我有一个提交提交的按钮(见下文)。 我想在选择此上传按钮之前取消上传其中一个文件。

通过代码,我看到当我最终点击提交时,它会为每个上传的文件调用fileuploadsubmit。

我想向用户网格显示所选文件,然后允许他们通过选择要从数据中删除的链接来取消其中一个文件。我在网上找到的所有样本都倾向于parent()。remove()从而从视觉网格中删除。

如果不显示该网格怎么办?

ie ..

                ...
                add: function (e, data) {

                $.each(data.files, function (index, file) {
                    files += file.name;
                });
                $('#files').text(files);

                viewModel.Add(data);

                data.context = $('#btnUpload')
                    .click(function () {
                        data.submit();
                        return false;
                    });
            },
            ......


            $('#fileupload').bind('fileuploadsubmit', function (e, data) {
            // The example input, doesn't have to be part of the upload form:
            //var input = $('#input');
            //data.formData = {example: input.val()};

            var countryId = 1; //viewModel.selectedCountry().CountryId()
            var selected = 'test'; //$('#lstTemplate option:selected').text();

            data.formData = { templateType: selected, countryId: countryId };
            if (data.formData.templateType == 'Select') {
                data.context.find('button').prop('disabled', false);
                return false;
            }
        });

1 个答案:

答案 0 :(得分:1)

实际上可以从data.files中删除一个文件。 我正在使用KnockoutJs网络组件,我在其中存储"上传对象的实例"我有文件列表的可观察数组...

我的配置是:

.fileupload({
            url: DataServiceBaseUrl + '/api/Ruleset/BatchImport',
            dataType: 'json',
            singleFileUploads: false,
            replaceFileInput: false,
            add: function (e, data) {
...

我做的是

this.RemoveFile = function(index){
   this.UploadInstance.files.splice(index,1);
   this.UploadFiles.splice(index,1);
}

和模板是:

 <!-- ko foreach: UploadFiles -->
    <div><span data-bind="text: name"></span><button data-bind="click: function() { $component.RemoveFile($index()); }">delete</button></div>
 <!-- /ko -->