Blueimp 文件上传将自定义数据添加到上传的文件并重置 data.files 数组

Question

我的页面上有一个下拉菜单，如下所示：

<select class="form-control navbar-right" id="my_ddown">
<option value="0">Value 0</option>
<option value="1">Value 1</option>   
</select>

并且我需要在上传文件时将额外的数据动态传递到我的后端。我使用以下功能执行此操作：

formData: {
my_id: $('#my_ddown').val()
}

但是每次我的选择下拉列表更改时，我都需要重新初始化文件上传程序。有没有更好的方法可以在不重新初始化的情况下做到这一点？

此外，每次我重新初始化文件上传器并尝试添加新文件时，我的

data.files

数组会记住以前添加的文件并将它们也添加到队列中，但我不希望这样。我只想要 1 个文件，最后添加。有什么方法可以做到这一点吗？我的 Blueimp 文件上传器代码如下：

function fileupload(){ // this function is called every time drop down selection changes
$('#files').empty();//empty the div but not files queue
uploadButton = $('<button/>')
.addClass('btn btn-primary')
.prop('disabled', false)
.text('Upload')
.on('click', function () {
var $this = $(this),
data = $this.data();
$this
.off('click')
.text('Abort')
.on('click', function () {
$this.remove();
data.abort();
});
data.submit().always(function () {
$this.remove();
});
});
$('#fileupload').fileupload({
dataType: 'json',
autoUpload: false,
maxFileSize: 26999000,
formData: { //additional data passed to backend
my_id: $('#my_ddown').val()
}
}).on('fileuploadadd', function (e, data) {
data.context = $('<div/>').appendTo('#files');
data.files = data.files.slice(0,1);//trying to remove all previously added files from queue but it does not work
$.each(data.files, function (index, file) {
var node = $('<p/>')
.append($('<span/>').text(file.name));
if (!index) {
node
.append('<br>')
.append(uploadButton.clone(true).data(data));
}
node.appendTo(data.context);
});
}).on('fileuploadprocessalways', function (e, data) {
var index = data.index,
file = data.files[index],
node = $(data.context.children()[index]);
if (file.preview) {
node
.prepend('<br>')
.prepend(file.preview);
}
if (file.error) {
node
.append('<br>')
.append($('<span class="text-danger"/>').text(file.error));
}
if (index + 1 === data.files.length) {
data.context.find('button')
.text('Upload')
.prop('disabled', !!data.files.error);
}
}).on('fileuploadprogressall', function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
}).on('fileuploaddone', function (e, data) {
$.each(data.result.files, function (index, file) {
if (file.url) {
var link = $('<a>')
.attr('target', '_blank')
.prop('href', file.url);
$(data.context.children()[index])
.wrap(link);
} else if (file.error) {
var error = $('<span class="text-danger"/>').text(file.error);
$(data.context.children()[index])
.append('<br>')
.append(error);
}
});
}).on('fileuploadfail', function (e, data) {
$.each(data.files, function (index) {
var error = $('<span class="text-danger"/>').text('File upload failed.');
$(data.context.children()[index])
.append('<br>')
.append(error);
});
}).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');
}

欢迎任何如何解决这些问题的想法。谢谢

UPD1

据我所知，问题是事件文件上传添加被调用了很多次，数据.files数组中有很多项目。这是由于我在每次下拉更改时重新初始化文件上传插件这一事实造成的。但是，如果我不这样做，我将无法根据当前时间下拉列表的值发送更新的数据。因此，问题是如何根据下拉列表的当前值发送更新的数据。谢谢。

Answer 1

使用以下代码解决了该问题：

.bind('fileuploadsubmit', function (e, data) {
var input = $('#input');
data.formData = {example: $('#my_ddown').val()};
if (!data.formData.my_id) {
data.context.find('button').prop('disabled', false);
input.focus();
return false;
}
})