Upload more than one image at a time jquery

Question

With this script, I can upload an image by jquery but how could do to upload more than one image at a time?

Also, How I receive for php all the images?

Thanks

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

Do u have many input type file with different names or many input type file with same name? in your HTML file — Michel, Jun 21 '15 at 04:17
Try my answer below. Hope it helps. Also as @talsibony said, you might have a look at external libraries like: http://www.dropzonejs.com or Jquery file upload, etc... — Michel, Jun 21 '15 at 04:52
Try this **[question and answer](http://stackoverflow.com/questions/28917058/file-upload-through-ajax-does-not-append-file-in-request-in-mvc)** to upload multiple files!!! — Guruprasad J Rao, Jun 21 '15 at 05:32
See http://stackoverflow.com/questions/28856729/upload-multiple-image-using-ajax-php-and-jquery — guest271314, Jun 21 '15 at 06:29

score 0 · Answer 1 · answered Jun 21 '15 at 04:44

I think you have to use external library to allow multifile upload see the JS fiddle 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 to upload multiple files such as uploadify, dropzone js, and more. good luck

Here is an example of uploading using native JS:

http://www.appelsiini.net/2009/html5-drag-and-drop-multiple-file-upload

score 0 · Answer 2 · answered Jun 21 '15 at 04:49

$('#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...
}

Upload more than one image at a time jquery

2 Answers2