cannot upload file using ajax with formdata

Question

I have the following code in my form. I try to upload the files via ajax using jquery. Other data fields in the form was submitted fine. But i cant add FILES to the POST request.

Here is my html code:

 <div class="form-group">
      <div class="col-lg-2">
       <label class="lab pull-right">Image:</label>
      </div>
      <div class="col-lg-2">
        <input type="file" name="nimp" required>
      </div>
   </div>

    <div class="form-group">
     <div class="col-lg-2">
       <label class="lab pull-right">Thumb Image:</label>
      </div>
      <div class="col-lg-2">
        <input type="file" name="ntimp"  id="ntimp" required>
      </div>
   </div>

My JQ Code:

$(document).ready(function(e) {
$('button.submit').click(function(e) {

    e.preventDefault();
    var a=new FormData();

    alert(a);

    $('.edit_form_prod_div').hide(); 
    $.ajax({
                      type:"POST",
                     url:"ep.php",
                    data:a,
                    cahe: false,
                   processData:false,
                   contentType: false,
                   success: function(response){
                   $('.edit_prod_response').html(response)

                     },
                         error:function(response)
                  { alert("Error Occures"); }
                     });
                     $('.edit_prod_response').show();
});
});

i hope this will help you http://stackoverflow.com/questions/21044798/how-to-use-formdata-for-ajax-file-upload — Shailendra Sharma, Oct 31 '14 at 12:09

score 0 · Answer 1 · answered May 04 '17 at 05:27

Try This Code

<form method="POST" enctype="multipart/form-data" id="fileUploadForm">
    <input type="file" name="files"/><br/><br/>
    <input type="submit" value="Submit" id="btnSubmit"/>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>


<script>

$(document).ready(function ()
{
    $("#btnSubmit").click(function()
    {
        var form = $('#fileUploadForm')[0];
        var data = new FormData(form);

        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "FileUploadHandler",
            data: data,
            processData: false, // Importent
            contentType: false, // Importent
            cache: false,
            timeout: 600000,
            success: function (data)
            { alert("File Uploaded...!")
            }
        });
    }); 

</script>

cannot upload file using ajax with formdata

1 Answers1