Load multiple images at one time in jquery
With this script, I can load an image using jquery, but how do I get to load more than one image at a time?
Also, how do I get all images for php?
thank
var inputFileImage = document.getElementById('image');
var formElement = document.getElementById("RevisionTicket");
var file = inputFileImage.files[0];
var data = new FormData(formElement);
data.append('image',file);
var url = 'AprobarTicket2.php';
$.ajax({
url:url,
type:'POST',
contentType:false,
data:data,
processData:false,
cache:false,
beforeSend: function(){
$("body").addClass("loading");
},
success: function(data){
$("body").removeClass("loading");
//$("#contenidoSecPaginas").html(data);
alert(data);
},
});
+3
source to share
2 answers
I think you should use an external library to allow multipoint loading see JS script below:
<input type="file" class="multi with-preview" multiple />
http://jsfiddle.net/fyneworks/2LLws/
it uses https://rawgit.com/fyneworks/multifile/2.1.0-preview/jquery.MultiFile.js
there are many other projects for uploading multiple files like uploadify, dropzone js, etc. good luck
Here's a load example using inline JS:
http://www.appelsiini.net/2009/html5-drag-and-drop-multiple-file-upload
0
source to share
$('#formId').on('submit', function(event){
event.preventDefault();
var form = document.querySelector('#yourFormId');
var request = new XMLHttpRequest();
var formData = new FormData(form);
request.open('post','phpScriptToProcessForm.php');
request.send(formData);
request.onreadystatechange = function() {
if (request.readyState === 4) {
if (request.status === 200) {
// OK
} else {
// not OK
}
}
};
});
PHP:
/* Note your input name must be an array
* e.g <input type="file" name="inputName[]" multiple>
*/
$image = $_POST['inputName'];
for($i = 0; $i <= count($image); $i++){
//Process images data, upload, insertion, etc...
}
0
source to share