blueimp jquery-file-upload如何在上传之前取消1个文件 [英] blueimp jquery-file-upload how to cancel 1 file before upload

问题描述

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

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

我有一个按钮，提交（见下文）。
我想要取消选择这个上传按钮之前选择的文件上传。

通过代码，我看到，当我终于击中提交，它调用fileuploadsubmit上传每个文件。

我想向用户显示所选文件的网格，然后通过从数据中删除链接来取消其中的一个。我在网上找到的所有样本倾向于parent（）。remove（），从而从可视网格中删除。

我怎样才能不显示网格？

b


$ b $ $
add：function（e ，data）{

$ .each（data.files，function（index，file）{
files + = file.name;
}）;
$（'＃files'）。text（files）;

viewModel.Add（data）;
$ b data.context = $（'＃btnUpload'）
.click（function（）{
data.submit（）;
return false;
}）;



$ b $（'＃fileupload'）。bind（'fileuploadsubmit'，function（e，data）{
//示例输入不一定是上传表单的一部分：
// var input = $（'＃input'）;
//data.formData = {example ：input.val（）};

var countryId = 1; //viewModel.selectedCountry（）。CountryId（）
var selected ='test'; // $（'＃lstTemplate （）;
$ b data.formData = {templateType：selected，countryId：countryId};
if（data.formData.templateType =='Select'）{
data.context.find（'button'）。prop（'disabled'，false）;
return false;
}
}）;

解决方案

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

我的配置是：

  .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> bind =click：function（）{$ component.RemoveFile（$ index（））;}>删除< / button>< / div> 
<！ -  / k o  - > 
  

I am using the following library https://github.com/blueimp/jQuery-File-Upload/wiki

I am showing the selected files after (add files) button is selected. I am not showing the demo grid showing cancel button or upload

I have a button which does the submit (see below). I would like to cancel the upload of one of the files selected before this upload button is selected.

Walking through the code i see that when i finally hit submit, it calls fileuploadsubmit for each file uploaded.

I would like to show to the user grid of files selected, then allow them to cancel one of them by picking a link to remove from data. All the samples i am finding online tend to parent().remove() thereby removing from visual grid.

How can i do without showing that grid?

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;
            }
        });

解决方案

Actually is possible to remove one file from data.files. I'm using KnockoutJs web-component in which I'm storing instance of "upload object" and I have observable array for file list ...

My configuration is:

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

what I did is

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

and template was:

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

这篇关于blueimp jquery-file-upload如何在上传之前取消1个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！