Send multipart-data in ajax Jquery

问题

I have a pop-up on my parent window that pop-up have a form also .That form will have some file input type .Now i want to send the data of the input types with the help of ajax. I have tried this :

var formData = new FormData();
formData.append("file", $('#profileImg').get(0).files[0]);

But this is not working for me.Check my html and jQuery:

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>

    </head>

    <body>
        <div id="test" style="display:none;box-shadow: 1px 1px 5px; left: 50%; margin: -150px 0 0 -310px;  position: absolute; top: 50%; width: 600px;  z-index: 2;">
            <form name="add_user_form" method="post" enctype="multipart/form-data">
                Name: <input type="text" name="uname" id="uname"/><br/>
                Age:  <input type="text" name="age" id="age"/><br/>
                Profile Image: <input name="profileImg[]" type="file" id="profileImg"/><br />
                Display Image: <input name="displayImg[]" type="file" id="displayImg"/><br />
                <input type="submit" value="Submit" id="addUser"  name="addUser"/>
                <input type="reset" value="Reset" />
            </form>
        </div>

        <div id="list">
            <input type="button" id="addButton" value="Add"/>
        </div>
    </body>
</html>

jQuery

<script>
            $(document).ready( function() {
                $("#addButton").live('click',function(){
                    $("#test").show();
                });

                $("form[name=add_user_form]").live("submit", function(){
                    var formData = new FormData();
                    formData.append("file", $('#profileImg').get(0).files[0]);

                    alert(JSON.stringify(formData));
                      $.ajax({
                        url: 'bansal.html',
                        type: 'POST',
                        data: formData,
                        async: false,
                        cache: false,
                        //contentType: false,
                        processData: false,
                        success: function (returndata) {
                          alert(JSON.stringify(returndata));
                        }
                      });
                    return false; 
                });
            });

        </script>

Suggest me how can we send all multipart data from ajax

回答1:

for multiple file inputs

var formData = new FormData();
var files = $('[name="profileImg[]"]').get(0).files;
var len = files && files.length;
var i=0;
for(;i<len;i++)
   formData.append("file[]", $('#profileImg').get(0).files[i]);

回答2:

You can use Jquery ajaxForm (jquery.form.js) for this.

     $("#yourformid").ajaxForm()
     $("#yourformid").ajaxSubmit(function(response){
              alert('Success');
     });

<form enctype="multipart/form-data" action="Youraction URL">
      <input type="file" name="profileImg"/>
</form>

You can send as many files you want.

来源：https://stackoverflow.com/questions/26060024/send-multipart-data-in-ajax-jquery

标签

javascript

jquery

html

ajax

multipartform-data