How to display multiple selected images and display them. It shows one

When I choose picture it displays fine. But when i choose multiple pictures it only shows one. I need it to display all the images when I choose multiple images. Also is it possible suppose i choose 3 pictures and I want another 2 from another folder at the same time. so i choose them again. I have tried it and when i choose next time it only fetch the last one i choose. The code is.

HTML:

<form id="uploadimage" name="uploadimage" action="" method="post" enctype="multipart/form-data">
<input type="file" name="file[]" id="file" class="selectphoto" multiple="multiple" />
<input type="submit" name="poststatusbtn" class="postbtn" value="Post" onClick="javascript:posttimeline();">
</form>

Javascript:

var workingwallpost = jQuery.noConflict();
workingwallpost(document).ready(function (e) { 
	workingwallpost("#uploadimage").on('submit',(function(e) {
		e.preventDefault(); 
		workingwallpost("#message").empty(); 
		workingwallpost('#loading').show();
	workingwallpost.ajax({ 
		url: "ajax_php_file.php", // Url to which the request is send 
		type: "POST", // Type of request to be send, called as method 
		data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values) 
		//data: new FormData(formdata[0]), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
		contentType: false, // The content type used when sending data to the server. 
		cache: false, // To unable request pages to be cached 
		processData:false, // To send DOMDocument or non processed data file it is set to false 
		success: function(data) // A function to be called if request succeeds 
			{ 
				workingwallpost('#loading').hide(); 
				workingwallpost("#message").html(data); 
			}
	});
})); 
	// Function to preview image after validation 
	workingwallpost(function() { 
		workingwallpost("#file").change(function() { 
			workingwallpost("#message").empty(); // To remove the previous error message 
			var file = this.files[0]; 
			var imagefile = file.type; 
			var match= ["image/jpeg","image/png","image/jpg"]; 
		if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2]))) 
		{ 
			//workingwallpost('#previewing').attr('src','noimage.png'); 
			workingwallpost("#message").html("<p id='error'>Not Valid</p>"+"<h4>Note</h4>"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>");
			return false; 
		} else {
			var reader = new FileReader(); 
			reader.onload = imageIsLoaded; 			
			reader.readAsDataURL(this.files[0]);
		} 
	}); 
}); 
	function imageIsLoaded(e) { 
	
							//Add Class
							var iDiv = document.createElement('div');
							iDiv.id = 'uploadingimagesli';
							iDiv.className = 'uploadingimagesli';
							document.getElementById("image_preview").appendChild(iDiv);
							// Now create and append to iDiv
							var innerDiv = document.createElement('div');
							innerDiv.className = 'block-2';
							//Add Class Finish
							//Prepend Class
							theParent = document.getElementById("image_preview");
							theKid = document.createElement("div");
							// append theKid to the end of theParent
							theParent.appendChild(theKid);
							// prepend theKid to the beginning of theParent
							theParent.insertBefore(theKid, theParent.firstChild);
							
							
							workingwallpost('#image_preview').css("display", "block"); 
							iDiv.innerHTML = "<img id='previewing' src='"+e.target.result+"' width='98' height='98' />";
							//innerDiv.innerHTML = workingwallpost('#previewing').attr('src', e.target.result); 
							//innerDiv.innerHTML = workingwallpost('#previewing').attr('width', '100px'); 
							//innerDiv.innerHTML = workingwallpost('#previewing').attr('height', '100px'); 
							
	}
});

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.