multiple file upload using ajax
Question
I am trying to achieve multiple file upload using Ajax, or at least it should look like ajax (without page reload). 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. I can not use the file api as python on server side does not get file object then. 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 answers
solution1
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. Also, there are numerous jQuery plugins doing that job, you could look at them.
solution2
3 2010-11-21 10:34:58
Untrue that files cannot be uploaded via JavaScript. It is possible to accomplish with the help of the sendAsBinary method that has been around starting with Firefox 3.5. 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 ). For details on how to send files via XMLHttpRequest , please refer to http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.