ryoonnet 0 Newbie Poster

Hi,
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...

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>Uploader</title>
        <link rel="stylesheet" type="text/css" href="/django_forms_media/css/igp_edp-main.css" />
        <script type="text/javascript" src="/django_forms_media/js/jquery-1.3.2.min.js">
        </script>
				
        <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:void(0)"><img src="/django_forms_media/icon/remove.png" onclick="removeRow(' + rowId + ',\'' + file_array[i] + '\');" border=0 /></a>&nbsp;';
										
					
				}
				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">&nbsp;
								<input type="reset" name="reset_button" id="reset_button" value="Cancel" onclick ="clearAllFiles();"/>
								
                            </div>
                        </form>
                    </fieldset>
                </div>
            </div>
        </div>
    </body>
</html>

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.