I have found a nice script which can upload 5 files at a time and insert into database. ----------------------------- Database: Name: uploader Fields: id, cat_id, photos ----------------------------- index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Multiple File Upload</title> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/swfupload/swfupload.js"></script> <script type="text/javascript" src="js/jquery.swfupload.js"></script> <script type="text/javascript"> $(function(){ $('#swfupload-control').swfupload({ upload_url: "upload-file.php", file_post_name: 'uploadfile', file_size_limit : "1024", file_types : "*.jpg;*.png;*.gif", file_types_description : "Image files", file_upload_limit : 5, flash_url : "js/swfupload/swfupload.swf", button_image_url : 'js/swfupload/wdp_buttons_upload_114x29.png', button_width : 114, button_height : 29, button_placeholder : $('#button')[0], debug: false }) .bind('fileQueued', function(event, file){ var listitem='<li id="'+file.id+'" >'+ 'File: <em>'+file.name+'</em> ('+Math.round(file.size/1024)+' KB) <span class="progressvalue" ></span>'+ '<div class="progressbar" ><div class="progress" ></div></div>'+ '<p class="status" >Pending</p>'+ '<span class="cancel" > </span>'+ '</li>'; $('#log').append(listitem); $('li#'+file.id+' .cancel').bind('click', function(){ var swfu = $.swfupload.getInstance('#swfupload-control'); swfu.cancelUpload(file.id); $('li#'+file.id).slideUp('fast'); }); // start the upload since it's queued $(this).swfupload('startUpload'); }) .bind('fileQueueError', function(event, file, errorCode, message){ alert('Size of the file '+file.name+' is greater than limit'); }) .bind('fileDialogComplete', function(event, numFilesSelected, numFilesQueued){ $('#queuestatus').text('Files Selected: '+numFilesSelected+' / Queued Files: '+numFilesQueued); }) .bind('uploadStart', function(event, file){ $('#log li#'+file.id).find('p.status').text('Uploading...'); $('#log li#'+file.id).find('span.progressvalue').text('0%'); $('#log li#'+file.id).find('span.cancel').hide(); }) .bind('uploadProgress', function(event, file, bytesLoaded){ //Show Progress var percentage=Math.round((bytesLoaded/file.size)*100); $('#log li#'+file.id).find('div.progress').css('width', percentage+'%'); $('#log li#'+file.id).find('span.progressvalue').text(percentage+'%'); }) .bind('uploadSuccess', function(event, file, serverData){ var item=$('#log li#'+file.id); item.find('div.progress').css('width', '100%'); item.find('span.progressvalue').text('100%'); var pathtofile='<a href="uploads/'+file.name+'" target="_blank" >view »</a>'; item.addClass('success').find('p.status').html('Done!!! | '+pathtofile); }) .bind('uploadComplete', function(event, file){ // upload has completed, try the next one in the queue $(this).swfupload('startUpload'); }) }); </script> <style type="text/css" > #swfupload-control p{ margin:10px 5px; font-size:0.9em; } #log{ margin:0; padding:0; width:500px;} #log li{ list-style-position:inside; margin:2px; border:1px solid #ccc; padding:10px; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#333; background:#fff; position:relative;} #log li .progressbar{ border:1px solid #333; height:5px; background:#fff; } #log li .progress{ background:#999; width:0%; height:5px; } #log li p{ margin:0; line-height:18px; } #log li.success{ border:1px solid #339933; background:#ccf9b9; } #log li span.cancel{ position:absolute; top:5px; right:5px; width:20px; height:20px; background:url('js/swfupload/cancel.png') no-repeat; cursor:pointer; } </style> </head> <body> <h3>» Multiple File Upload With Progress Bar</h3> <div id="swfupload-control"> <p>Upload upto 5 image files</p> <input type="button" id="button" /> <p id="queuestatus" ></p> <ol id="log"></ol> </div> </body> </html> PHP: upload-file.php $host="localhost"; // Host name $username="root"; // Mysql username $password=""; // Mysql password $db_name="test"; // Database name $tbl_name="uploader"; // Table name // Connect to server and select databse. mysql_connect("$host", "$username", "$password")or die("cannot connect"); mysql_select_db("$db_name")or die("cannot select DB"); $uploaddir = './uploads/'; $file = $uploaddir . basename($_FILES['uploadfile']['name']); $size=$_FILES['uploadfile']['size']; if($size>1048576) { echo "error file size > 1 MB"; unlink($_FILES['uploadfile']['tmp_name']); exit; } if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) { mysql_query("INSERT INTO $tbl_name VALUES('', '$file')"); echo "success"; } else { echo "error ".$_FILES['uploadfile']['error']." --- ".$_FILES['uploadfile']['tmp_name']." %%% ".$file."($size)"; } PHP: Need helps for: I have added another field (cat_id) into database which will be filled up from taking values from the under given <select> list written in index.php file. I tried to fill up the form and it gives me a 0 value into database for cat_id field. How can I get the actual value from selectlist and can insert into database. <select name="selectCat"> <option value="0" selected>- Select One -</option> <option value ="1">Cars</option> <option value ="2">Jeeps</option> </select> Any question, please let me know. Thanks a lot.
My guess is if you remove selected from the "0" value your option list will work. you can post the form here so i can take a look?
I had removed "0" value, but not solved. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Multiple File Upload</title> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/swfupload/swfupload.js"></script> <script type="text/javascript" src="js/jquery.swfupload.js"></script> <script type="text/javascript"> $(function(){ $('#swfupload-control').swfupload({ upload_url: "upload-file.php", file_post_name: 'uploadfile', file_size_limit : "1024", file_types : "*.jpg;*.png;*.gif", file_types_description : "Image files", file_upload_limit : 5, flash_url : "js/swfupload/swfupload.swf", button_image_url : 'js/swfupload/wdp_buttons_upload_114x29.png', button_width : 114, button_height : 29, button_placeholder : $('#button')[0], debug: false }) .bind('fileQueued', function(event, file){ var listitem='<li id="'+file.id+'" >'+ 'File: <em>'+file.name+'</em> ('+Math.round(file.size/1024)+' KB) <span class="progressvalue" ></span>'+ '<div class="progressbar" ><div class="progress" ></div></div>'+ '<p class="status" >Pending</p>'+ '<span class="cancel" > </span>'+ '</li>'; $('#log').append(listitem); $('li#'+file.id+' .cancel').bind('click', function(){ var swfu = $.swfupload.getInstance('#swfupload-control'); swfu.cancelUpload(file.id); $('li#'+file.id).slideUp('fast'); }); // start the upload since it's queued $(this).swfupload('startUpload'); }) .bind('fileQueueError', function(event, file, errorCode, message){ alert('Size of the file '+file.name+' is greater than limit'); }) .bind('fileDialogComplete', function(event, numFilesSelected, numFilesQueued){ $('#queuestatus').text('Files Selected: '+numFilesSelected+' / Queued Files: '+numFilesQueued); }) .bind('uploadStart', function(event, file){ $('#log li#'+file.id).find('p.status').text('Uploading...'); $('#log li#'+file.id).find('span.progressvalue').text('0%'); $('#log li#'+file.id).find('span.cancel').hide(); }) .bind('uploadProgress', function(event, file, bytesLoaded){ //Show Progress var percentage=Math.round((bytesLoaded/file.size)*100); $('#log li#'+file.id).find('div.progress').css('width', percentage+'%'); $('#log li#'+file.id).find('span.progressvalue').text(percentage+'%'); }) .bind('uploadSuccess', function(event, file, serverData){ var item=$('#log li#'+file.id); item.find('div.progress').css('width', '100%'); item.find('span.progressvalue').text('100%'); var pathtofile='<a href="uploads/'+file.name+'" target="_blank" >view »</a>'; item.addClass('success').find('p.status').html('Done!!! | '+pathtofile); }) .bind('uploadComplete', function(event, file){ // upload has completed, try the next one in the queue $(this).swfupload('startUpload'); }) }); </script> <style type="text/css" > #swfupload-control p{ margin:10px 5px; font-size:0.9em; } #log{ margin:0; padding:0; width:500px;} #log li{ list-style-position:inside; margin:2px; border:1px solid #ccc; padding:10px; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#333; background:#fff; position:relative;} #log li .progressbar{ border:1px solid #333; height:5px; background:#fff; } #log li .progress{ background:#999; width:0%; height:5px; } #log li p{ margin:0; line-height:18px; } #log li.success{ border:1px solid #339933; background:#ccf9b9; } #log li span.cancel{ position:absolute; top:5px; right:5px; width:20px; height:20px; background:url('js/swfupload/cancel.png') no-repeat; cursor:pointer; } </style> </head> <body> <h3>» Multiple File Upload With Progress Bar</h3> Category: <select name="selectCat"> <option value="0" selected>- Select One -</option> <option value ="1">Cars</option> <option value ="2">Jeeps</option> </select> <div id="swfupload-control"> <p>Upload upto 5 image files</p> <input type="button" id="button" /> <p id="queuestatus" ></p> <ol id="log"></ol> </div> </body> </html> PHP:
I would try this with one file and then add the multiple file capability. As uploading multiple files at once creates many complications as apposed to uploading 1 file at a time
in my opinion, it's more easy to use array for sending the data, so when you click submit, it will send array of file, and proceed it one by one i already doing the upload file with more simple code.