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');
}
});