javascript - multiple file upload using ajax -
i trying achieve multiple file upload using ajax, or @ least should ajax (without page reload). below code...
i able using simple submit. in above code can list of files, reomove files , upload rest server. want ajax, progressbar. can not use file api python on server side not file object then. 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; /* ----------- add file name in 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(); } /* ----------- add file name in hidden field end ----------- */ /* ----------- create , 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); } /* ----------- create , display new file input end ------------ */ /* ----------- add row in 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; } /* ----------- add row in table end ----------- */ /* ----------- remove row table start ----------- */ function removerow(removerowid, file_to_remove){ var row = document.getelementbyid(removerowid); row.parentnode.removechild(row); removefilename(file_to_remove); } /* ----------- remove row table end ----------- */ /* ----------- remove specific file name hidden field , array start ----------- */ function removefilename(file_to_remove){ (var = 0; < 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('^')); } /* ----------- remove specific file name hidden field , array end ----------- */ /* ----------- clear file array , removing rows start ----------- */ function clearallfiles(){ file_array = []; var table = document.getelementbyid("selected_files_table_body"); (var = table.rows.length - 1; > 0; i--) { table.deleterow(i); rowid = 0; } } /* ----------- clear file array , removing 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>
you have use hidden iframe , send data there, it's not possible upload files xmlhttprequest. also, there numerous jquery plugins doing job, @ them.
Comments
Post a Comment