How to upload multiple image upload without submit button using ajax jquery?

Question

How to upload multiple image upload without submit button using ajax jquery?Can someone help my finding out whats wrong?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">     </script>

Here is the code

  <body> 
    <input name="files[]" type="file" multiple />
    <input type="hidden" name="hiddenval" id="hiddenval" value="">
    <button id="upload" value="Upload" class="btn btn-success" />
  </body>
</html>

<script>
  $(document).on("click", "#upload", function() {
    var outputdata = [];

    $.ajax({
      url: "upload1.php",
      type: "POST",
       data: new Form(this),
      contentType: false,
      processData: false,
      success: function(files, data, xhr) {
        outputdata.push(files);
        $('#hiddenval').val(outputdata)
      }
    });
  });
</script>

Why are you mixing Bootstrap CSS (3.3.6) and JS (3.3.7) versions? — Filnor, Dec 13 '17 at 09:43
@RoryMcCrossan, i'm getting a warning"Warning: Invalid argument supplied for foreach() in path" — think_user, Dec 13 '17 at 09:44
That's because you're providing a reference to a button (the `#upload` element) to the `FormData` constructor. It needs to be a `form` element instead — Rory McCrossan, Dec 13 '17 at 09:46
@RoryMcCrossan, i have changed the formdata ,still its not upload the image. — think_user, Dec 13 '17 at 09:52
We can't really help without seeing what you changed it to. Please edit your question to show the updated code. — Rory McCrossan, Dec 13 '17 at 09:52
@RoryMcCrossan, code updated....idon't know the right format..i'm new to jquery.. — think_user, Dec 13 '17 at 09:58
You still need to use a `FormData` object - you need to provide a reference to a `
` element as the argument to the constructor. If you don't have one you'll need to `append()` the file data manually. Here's a clearer example: https://stackoverflow.com/questions/21044798/how-to-use-formdata-for-ajax-file-upload — Rory McCrossan, Dec 13 '17 at 09:59

score 2 · Answer 1 · edited May 14 '18 at 10:52

add id to this input for easier get value.

<input name="files[]" type="file" multiple id="files"/>

Includes values from this input to data:

$(document).on("click", "#upload", function() {
    var outputdata = [];
    var fileSelect = document.getElementById('files');
    var files = fileSelect.files;
    var formData = new FormData();
    // Loop through each of the selected files.
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        // Check the file type.
        if (!file.type.match('image.*')) {
            continue;
        }
        // Add the file to the request.
        formData.append('photos[]', file, file.name);
    }

    $.ajax({  
        url: "upload1.php",  
        type: "POST",  
        data: formData,  
        contentType: false,  
        processData:false,  
        success: function(files,data,xhr)  
        {           
           outputdata.push(files);
           $('#hiddenval').val(outputdata);
        }  
    }); 
});

Refer: http://blog.teamtreehouse.com/uploading-files-ajax

**Note:** I'm not sure if the 3rd parameter is required when using `.append`, I missed it out and everything worked as intended. Either way, excellent answer. — Script47, May 14 '18 at 10:51

How to upload multiple image upload without submit button using ajax jquery?

1 Answers1