使用ajax上传多个文件
[英]multiple file upload using ajax
问题描述
我正在尝试使用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>
2 个解决方案
解决方案1
4 2010-11-15 13:53:39
您必须使用隐藏的iframe并在那里发送数据，因此无法使用XMLHttpRequest上传文件。 另外，有许多jQuery插件可以完成这项工作，您可以看看它们。
解决方案2
3 2010-11-21 10:34:58
如果文件不能通过JavaScript上传，则为不正确。 从Firefox 3.5开始，可以借助sendAsBinary方法完成此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 。
使用 AJAX 在序列/队列中上传多个文件
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.