我正在尝试使用Ajax实现多个文件上传，或者至少它应该看起来像ajax（没有页面重新加载）。以下是我的代码......
我可以使用简单的提交来完成。在上面的代码中，我可以获取所有文件的列表，重新编辑一些文件，然后将其余文件上传到服务器。 但我想像ajax一样，使用进度条。我不能使用文件api作为服务器端的python然后获取文件对象。 任何帮助表示赞赏。
<!DOCTYPE html>
上传
<script type="text/javascript">
var file_array = [];
var file_name_cell,relation_cell, option_cell, sr_no_cell;
var rowId = 0;
var fileCount = 1;
var new_file_id = '';
var array_last_index = 0;
/* ----------- To add file name in the hidden field start ----------- */
function addFileName(fileId){
var file = document.getElementById(fileId);
for(var i=0; i<file.files.length; i++){
file_array.push(file.files.item(i).fileName);
}
$('#file_names').val(file_array.join('^'));
file.style.display = 'none';
createNewFileInput();
addRow();
}
/* ----------- To add file name in the hidden field end ----------- */
/* ----------- To create and display new file input start ------------ */
function createNewFileInput(){
fileCount += 1
new_file_id = 'files_' + fileCount;
var new_file_input = document.createElement('input');
new_file_input.setAttribute('type', 'file');
new_file_input.setAttribute('name', new_file_id);
new_file_input.setAttribute('id', new_file_id);
new_file_input.setAttribute('multiple', 'multiple');
new_file_input.setAttribute('onchange', 'addFileName(\'' + new_file_id + '\')');
document.getElementById('file_input_area').appendChild(new_file_input);
}
/* ----------- To create and display new file input end ------------ */
/* ----------- To add row in the table start ----------- */
function addRow(){
var table = document.getElementById('selected_files_table_body');
var last_row,
row;
for(var i=array_last_index; i<file_array.length; i++){
rowId += 1;
try{
last_row = table.rows.length;
}
catch(e){
row = table.insertRow(0);
}
row = table.insertRow(last_row);
row.id = rowId;
sr_no_cell = row.insertCell(0);
sr_no_cell.innerHTML = rowId+'.';
file_name_cell = row.insertCell(1);
file_name_cell.style.textAlign = 'left';
file_name_cell.innerHTML = file_array[i];
option_cell = row.insertCell(2);
option_cell.innerHTML = '<a href="javascript<b></b>:void(0)"><img src="/django_forms_media/icon/remove.png" onclick="removeRow(' + rowId + ',\'' + file_array[i] + '\');" border=0 /></a> ';
}
array_last_index = file_array.length;
}
/* ----------- To add row in the table end ----------- */
/* ----------- To remove row from the table start ----------- */
function removeRow(removeRowId, file_to_remove){
var row = document.getElementById(removeRowId);
row.parentNode.removeChild(row);
removeFileName(file_to_remove);
}
/* ----------- To remove row from the table end ----------- */
/* ----------- To remove specific file name from hidden field and array start ----------- */
function removeFileName(file_to_remove){
for (var i = 0; i < file_array.length; i++) {
if (file_array[i] == file_to_remove) {
file_array.splice(i, 1);
array_last_index -= 1;
break;
}
}
$('#file_names').val(file_array.join('^'));
}
/* ----------- To remove specific file name from hidden field and array end ----------- */
/* ----------- To clear the file array and removing all rows start ----------- */
function clearAllFiles(){
file_array = [];
var table = document.getElementById("selected_files_table_body");
for (var i = table.rows.length - 1; i > 0; i--) {
table.deleteRow(i);
rowId = 0;
}
}
/* ----------- To clear the file array and removing all rows end ----------- */
</script>
</head>
<body>
<div >
<div >
<div >
<fieldset>
<legend>
Upload Package
</legend>
<form id="frm_upload_package" name="frm_upload_package" action="/djangoforms/uploadcontents/" method="post" enctype="multipart/form-data">
<div class="selectfile">
<label>
Select Files:
</label>
<br/>
</div>
<span id="file_input_area">
<input id="files_1" type="file" name="files_1" multiple = "multiple" onchange="addFileName('files_1');"/>
<input id="file_names" type="hidden" size=100 name="fileNames" />
</span>
<fieldset style="width:70%;">
<legend>Selected Files</legend>
<table id = "selected_files_table" name = "selected_files_table" style="margin-left:0" class="sortable" cellspacing="0" cellpadding="3" border="0">
<thead>
<tr>
<th>Sr.No.</th>
<th>File Name</th>
<th>Option</th>
</tr>
</thead>
<tbody id = "selected_files_table_body" name = "selected_files_table_body">
</tbody>
</table>
</fieldset>
<div class="buttonrow">
<input type="button" value="Upload" id="upload_package" name="upload_package">
<input type="reset" name="reset_button" id="reset_button" value="Cancel" onclick ="clearAllFiles();"/>
</div>
</form>
</fieldset>
</div>
</div>
</div>
</body>
答案 0 :(得分：4)
您必须使用隐藏的iframe并在那里发送数据，因此无法使用XMLHttpRequest上传文件。 此外，有很多jQuery插件可以完成这项工作，你可以看看它们。
答案 1 :(得分：3)
不通过JavaScript无法上传文件。借助于Firefox 3.5开始的sendAsBinary方法，可以实现这一目标。在Firefox 4+（也在Chrome 5+和Safari 5+中），还支持FormData界面，可以轻松构建multipart/form-data个请求（请在http://www.faqs.org/rfcs/rfc2388.html详细了解它）。有关如何通过XMLHttpRequest发送文件的详细信息，请参阅http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html。