Learn VBA & Macros in 1 Week!

JavaScript - Have Upload Script, Need It Edited For Multi-uploads On One Page

Full Excel VBA Course - Beginner to Expert

Have Upload Script, Need It Edited For Multi-uploads On One Page	View Content

Hello All,
I found this awesome upload script and it works perfectly for what I need so far. The one problem is I can't get it to work for multiple (individual files).
The script works like a user will click the browse button, select the file, and it auto submits uploading the file. Now the script is setup to handle multiple files selected all at once, but I need separate buttons for each file.

So here is the main page
Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>HTML5 File API</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
	<div id="main">
		<h1>Upload Your Images</h1>
		<form method="post" enctype="multipart/form-data"  action="upload.php">
    		<input type="file" name="images" id="images"/>
    		<input type="file" name="images" id="images"/>
    		<input type="file" name="images" id="images"/>
    		<button type="submit" id="btn">Upload Files!</button>
    	</form>

  	<div id="response"></div>
		<ul id="image-list">

		</ul>
	</div>
	
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="upload.js"></script>
</body>
</html>

Here is the upload.php file
Code:

<?php

foreach ($_FILES["images"]["error"] as $key => $error) {
    if ($error == UPLOAD_ERR_OK) {
        $name = $_FILES["images"]["name"][$key];
        move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
    }
}


echo $_FILES['images']['name'][$key];
?>

And the upload.js file
Code:

(function () {
	var input = document.getElementById("images"), 
		formdata = false;


	if (window.FormData) {
  		formdata = new FormData();
  		document.getElementById("btn").style.display = "none";
	}
	
 	input.addEventListener("change", function (evt) {
 		document.getElementById("response").innerHTML = "Uploading . . ."
 		var i = 0, len = this.files.length, img, reader, file;
	
		for ( ; i < len; i++ ) {
			file = this.files[i];
	
				if ( window.FileReader ) {
					reader = new FileReader();
					reader.onloadend = function (e) { 
						showUploadedItem(e.target.result, file.fileName);
					};
					reader.readAsDataURL(file);
				}
				if (formdata) {
					formdata.append("images[]", file);
				}
		}
	
		if (formdata) {
			$.ajax({
				url: "upload.php",
				type: "POST",
				data: formdata,
				processData: false,
				contentType: false,
				success: function (res) {
					document.getElementById("response").innerHTML = res; 
				}
			});
		}
	}, false);
}());

I'm good with php, but don't know much with javascript and jquery so I don't really know how this works. Is there a way to adjust this so the multiple file inputs will upload. Right now it will only upload the first one.

Here is it working. http://www.skafreaks.com/new2/upload/

Thanks for any help
SkaFreaks

Full Excel VBA Course - Beginner to Expert

Multi-login Script - Help

Similar Tutorials

JavaScript - Have Upload Script, Need It Edited For Multi-uploads On One Page

Have Upload Script, Need It Edited For Multi-uploads On One Page

Similar Tutorials

Multi-login Script - Help

Multi-answer Script?

Multi-selct Filter Script Possibility

Div Tag- Save Edited Value

Help With Multi Page Variables

Javascript Multi Option Selected & Iframe Src On Page Refresh

Best Way To Display Uninterupted Audio Player Across A Multi-page Website

Swfupload Not Passing Files To Upload Script

How Can I Create Mirrors For My Uploads ?

Video Uploads Stopped Working

Script For Page Timer/expiration? A Page That Has Its Own Expiration (eg. 24 Hours)

Fb Script And Page Not Aligning

Run Script After Page Refresh?

Page Navigation Script

Find On Page Script

One Script Isn't Working With Two In A Page

Search This Page Script

Script Edit On Other Page

Load Page Script

Cant Load 2 Script's On 1 Page.