我使用Jquery fileupload库(blue emp,https://blueimp.net)来上传文件 我在每一行都有包含fileupload控件的表。
<table id="recordTable" class="table table-bordered table-striped">
<thead>
<tr>
<th>Question Number</th>
<th>Question Text</th>
<th>Supported Document</th>
<th>File Upload Status</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td class="ques_id">17</td>
<td class="ques_text">asddsf</td>
<td class="ques_file"><input type="file" name="supportingDocument" accept="application/pdf" id="uploadSupportingDoc"></td>
<td class="fileuploadSuccess"></td>
<td><a href="#" id="deleteButton" class="btn btn-primary">delete</a></td>
</tr>
<tr>
<td class="ques_id">18</td>
<td class="ques_text">dfgdfg</td>
<td class="ques_file"><input type="file" name="supportingDocument" accept="application/pdf" id="uploadSupportingDoc"></td>
<td class="fileuploadSuccess"></td>
<td><a href="#" id="deleteButton" class="btn btn-primary">delete</a></td>
</tr>
</tbody>
</table>
文件上传的Onchange事件,我在这里做的是发送第一列的数据,即questionId(它的唯一id列)
$('#uploadSupportingDoc').on("change", function(){
console.log("on change called!");
var questionId = $(this).parent().siblings(":first").text();
console.log("fileUpload called with Id =>"+questionId);
uploadFile(questionId);
});
asdsad
function uploadFile(questionId) {
$('#uploadSupportingDoc').fileupload({
url: 'uploadSupportingDoc.html',
formData: {questionId: questionId },
acceptFileTypes: /(\.|\/)(jpe?g)$/i,
maxFileSize: 100,
dropZone: null,
pasteZone: null,
fileInput: $(this),
dataType: 'json',
add: function(e, data){
$(this).closest('tr').children('td.fileuploadSuccess').html('<img src="./img/ajax-loader.gif" alt="Uploading..." />');
data.submit();
},
done: function (e, data){
var response = data.result.files[0];
console.log("done");
if(!response.isRequestValid)
{
window.location = "requestDenied.html";
}
else
{
if(response.status)
{
$(this).closest('tr').children('td.fileuploadSuccess').html("<span class=\"glyphicon glyphicon-ok\" aria-hidden=\"true\"></span>")
}
else
{
$(this).parent().siblings().find(".fileuploadSuccess").html("<span class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\"></span>")
}
}
},
fail: function(e, data){
console.log("failed");
console.log(data.jqXHR.responseText);
console.log(data.jqXHR+"\m");
},
always: function (e, data){
console.log("in always");
}
});
}
这里发生的事情是仅在第一次尝试时 $('#uploadSupportingDoc')。on(“change”,function(){})被调用,之后< strong>每个后续更改事件都直接调用 $('#upinSupportingDoc')。fileupload()函数。为什么会这样?