使用ajax上传多个文件
[英]multiple file upload using ajax
问题描述
I am trying to achieve multiple file upload using Ajax, or at least it should look like ajax (without page reload). 
我正在尝试使用Ajax实现多个文件上传，或者至少它看起来应该像ajax（无需重新加载页面）。 Below is my code... 下面是我的代码...
I am able to do it using simple submit. 我可以使用简单的提交来做到这一点。 In the above code I can get the list of all the files, reomove some files and then upload the rest to the server. 在上面的代码中，我可以获取所有文件的列表，删除一些文件，然后将其余文件上传到服务器。 but I want to do it like ajax, with the progressbar. 但我想使用进度条像ajax一样进行操作。 I can not use the file api as python on server side does not get file object then. 我不能使用文件api，因为服务器端的python无法获取文件对象。 Any help is appreciated. 任何帮助表示赞赏。
<!DOCTYPE html>
Uploader 上传
<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
You have to use hidden iframe and send data there, it's not possible to upload files with XMLHttpRequest. 您必须使用隐藏的iframe并在那里发送数据，因此无法使用XMLHttpRequest上传文件。 Also, there are numerous jQuery plugins doing that job, you could look at them. 另外，有许多jQuery插件可以完成这项工作，您可以看看它们。
解决方案2
3 2010-11-21 10:34:58
Untrue that files cannot be uploaded via JavaScript. 如果文件不能通过JavaScript上传，则为不正确。 It is possible to accomplish with the help of the sendAsBinary method that has been around starting with Firefox 3.5. 从Firefox 3.5开始，可以借助sendAsBinary方法完成此sendAsBinary 。 In Firefox 4+ (also in Chrome 5+ and Safari 5+), there's also support for the FormData interface that makes it easy to construct multipart/form-data requests (read more about it at http://www.faqs.org/rfcs/rfc2388.html ). 在Firefox 4+（Chrome 5+和Safari 5+）中，还支持FormData接口，可轻松构造multipart/form-data请求（有关更多信息，请访问http://www.faqs.org）。 /rfcs/rfc2388.html ）。 For details on how to send files via XMLHttpRequest , please refer to http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html . 有关如何通过XMLHttpRequest发送文件的详细信息，请参阅http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.