使用jquery简单上传在一个表单中实现多个拖放文件上传

Question

使用来自kanetityjquery的插件进行简单上传效果良好。然而，当我试图在一个表单中有多个上传字段时，我失败了。多个上传字段实际上是根据用户请求使用jquery动态创建的。

<input type="hidden" name="foto_0" value="">
<input type="file" name="bild" multiple="false" id="basic_0">
<div id="basicdropzone_0" class="dropZone"><div>drop pic here</div></div>
<div id="basicprogress_0"></div>
<div id="basicmessage_0"></div>

<input type="hidden" name="foto_1" value="">
<input type="file" name="bild" multiple="false" id="basic_1">
<div id="basicdropzone_1" class="dropZone"><div>drop pic here</div></div>
<div id="basicprogress_1"></div>
<div id="basicmessage_1"></div>

等等。计算是动态创建的。对于每个新的上传元素，插件通过使用绑定到该元素

function BindUpload(i) {
$('#basic_'+i).simpleUpload({
url: 'ajax_upload.php',
method: 'post',
params: { key: 'test' },
ajax: {
headers: { 'X-Test': 'test' },
statusCode: {
200: function() {
console.log('success!');
}
}
},
dropZone: '#basicdropzone_'+i,
progress: '#basicprogress_'+i
}).on('upload:progress', function(e, file, i, loaded, total) {
console.log('progress ' + i + ' ' + loaded + '/' + total);
}).on('upload:done', function(e, file, i, data) {
console.log('done ' + i);
var picdata=JSON.parse(data);
$("input[name=foto_"+i+"]").val(picdata.pic);
console.log(bilddaten.bild);
$('#basicmessage_'+i).prepend('<p>done: ' + file.name + '</p>');
});
}

当我在第一个元素中放入一个文件时，一切都会按预期进行。然而，当在第二个或其他元素中删除文件时，尽管它可以工作，但它仍然使用第一个元素，并在那里插入新上传的图片。

有人在同一表单中使用此插件进行多个上传字段吗？

Answer 1

找到了问题和解决方案。绑定插件显然没有绑定i变量。然而，在绑定到服务器端上传脚本时传递i变量，并在完成后将其返回，解决了这个问题。

function BindUpload(i) {
$('#basic_'+i).simpleUpload({
url: 'ajax_upload.php',
method: 'post',
params: { 'foto': 'foto_'+i },
ajax: {

},
dropZone: '#basicdropzone_'+i,
progress: '#basicprogress_'+i
}).on('upload:done', function(e, file, i, data) {
var picdata=JSON.parse(data);
$("input[name="+picdata.foto+"]").val(picdata.bild);
});
}

添加params并在回调中使用它解决了整个问题。