how to send file input using jquery?

Question

i have a form that contains 3 File inputs.i want to send it via jquery.i tried serialize function in jquery,but i realized that this function don't send file inputs!

here is my form :

<form id="submit_pics" action="#" >

     file 1 : <input name="file1" id="file1" type="file" /><br />
     file 2 : <input name="file2" id="file2" type="file" /><br />
     file 3 : <input name="file3" id="file3" type="file" /><br />

     <br />
     <div>
         <a id="submit" href="javascript:;" ><img  src="uploads/images/button1.png" /></a>
     </div>

</form>

and this is my javascript code :

<script type="text/javascript">

    $(document).ready(function(){

        $("#level3").click(function(event) {

            var str = $("#submit_pics").serialize(); 
            $.ajax({
                type: "POST",
                url: "track.php",
                data: str, 
                success: function(theResponse) {

                                        $('#req_result').html(theResponse);

                                    }

                return false;   
        });

    });

Joan · Accepted Answer · 2015-03-25 15:08:19Z

10

After some research I found that you can do it with:

$.ajax({
    url: 'track.php',
    type: 'POST',
    data: new FormData($("#submit_pics")[0]),
    processData: false,
    contentType: false
}).

I'm Java programmer (Liferay) and in the server I use this to get the File:

UploadPortletRequest uploadRequest = PortalUtil.getUploadPortletRequest(request);
File File1 = uploadRequest.getFile("file1");
File File2 = uploadRequest.getFile("file2");

I supose something similar exists in php.

answered Mar 25, 2015 at 15:08

Joan

2394 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

S.L. Barth is on codidact.com · Accepted Answer · 2014-12-12 10:18:12Z

6

Unfortunately you can not upload files through XMLHttpRequest. AJAX doesn’t actually post forms to the server, it sends selected data to in the form of a POST or GET request. Javascript is not capable of grabbing the file from the users machine and sending it to the server

You can use a tricky workaround, posting (without AJAX) the request to an hidden iframe.

Have a look at this TUTORIAL

edited Dec 12, 2014 at 10:18

S.L. Barth is on codidact.com

8,25371 gold badges55 silver badges68 bronze badges

answered Aug 26, 2010 at 9:02

dmarucco

5904 silver badges11 bronze badges

3 Comments

armin etemadi Over a year ago

thank you so much buddy for your complete answer,you've helped me so much :)

Rosdi Kasim Over a year ago

Is this true? This blog says otherwise: portfolio.planetjon.ca/2014/01/26/…

Anthony Mason Over a year ago

It used to be true, yes. Now most browsers are up to date and allow this. Although, I believe IE still has some protective feature to not post unless the user manually clicks the submit.

Deniz Dogan · Accepted Answer · 2010-08-26 07:43:51Z

0

You should take a look at the JQuery Form Plugin. With that you can easily programmatically submit any form you have.

answered Aug 26, 2010 at 7:43

Deniz Dogan

26.3k36 gold badges115 silver badges162 bronze badges

Comments

Reigel Gallarde · Accepted Answer · 2010-08-26 07:44:00Z

-1

You can't do it via $.ajax() but you can use this uploadify plugin.

answered Aug 26, 2010 at 7:44

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

Comments

Jorge Santos Neill · Accepted Answer · 2018-08-30 20:13:40Z

This code works for me

 _private.saveFile=function(){
      var formElement = $("#formId")[0];
      var _params = new FormData(formElement),
          _url = $(formElement).attr("action");

      _private.postFile(_url,_params,function(data,error){ 
           console.log(data);
           console.log(error);
      });
 }


_private.postFile=function(_urlService,_parameters,callback){
    var _url= _public.getPath()+_urlService;
    _private.httpPostFile(_url,callback,_parameters);
};

_private.httpPostFile=function(_url,callback,_data){

    $.ajax({
        url: _url,
        type: 'POST',
        data: _data,
        mimeType: "multipart/form-data",
        contentType: false,
        cache: false,
        processData: false,
        success: function (data, textStatus, jqXHR) {
            callback(data,null);
        },
        error: function(xhr, status, error) {
            console.log('error ',error);
            console.log('status ',status);
            console.log('xhr ',xhr);
            callback(null,error);
        }
    });
}

Collectives™ on Stack Overflow

how to send file input using jquery?

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related