JQuery - getting an array of $ _FILES using $ .post

Question

I am trying to submit a form via jQuery. My form contains the fields and the file to be uploaded. It has type ENCTYPE="multipart/form-data" .

I can get all my field values ​​using: post = $('#myForm').serialize(); But how do I get the $_FILES ? I need this to handle the downloaded file.

Is this possible with jQuery, and if so, how? Or do I need to use a special download plugin for jQuery?

Answer 1

A jquery form is the best way to do this, you can add it to any normal form,

 <form method="post" action="URL"> <input type="file" name="file"> <input type="text" name"text"> <input type="submit"> </form> <script type="text/javascript"> $(document).ready(function() { $(form).ajaxForm(); }) </script> 

will work as expected, but with ajax.

http://malsup.com/jquery/form/#code-samples

Answer 2

You cannot upload files through javascript.

Check out this related question:
Can I use Ajax to upload files?

In fact, the two most popular ways to “falsify” AJAX for uploading files are to use a Flash plugin such as SWFUpload or submitting a form for a hidden iframe that processes the request.

Answer 3

The form contains the input file, but there is no = POST method and enctype = multipart / form-data in the form. The file will not be sent

Answer 4

Use FormData p>

 <form> <label for="imageToSend">Cargar imagen a la galeria</label> <input type="file" name="imageToSend" id="imageToSend" value="Cargar imagen" /> </form> <script> $('#imageToSend').on('change',function(event){ var dialog = $('#dialog'); var Data = new FormData(); Data.append('imageToSend',$('#imageToSend')[0].files); $(this).val('');//Clear input file $.ajax({ url: "/upload", data: Data, processData: false, contentType: false, type:'POST', success: function(data){ if(data.success){ //success handler }else if(!data.success){ //error backend handler } }, error: function(data){ //error handler Ej:404 status } }) }); </script> 

Answer 5

If you can manage the environment, for example, you are writing an administrator application for an intranet in which you recommend a browser, then real AJAX file downloads are possible with Firefox 3 and higher. In all other cases, an iframe bypass method or a Flash-based loader is the way to go.

Answer 6

It is possible, but it doesn’t work in Google Chrome) Look!

 ... <form method='post' enctype='multipart/form-data'> <input type="file" id="imf" name="imf"/> <input type="button" id="Save"/> </form> ... $("#Save").live("click", function(){ var photo = document.getElementById("imf"); var file = photo.files[0]; $.post('/user/saveNewPhoto', {'imf':file.getAsDataURL(), fname:file.fileName }, function( data ){ alert ( data ); }); }); 

the download side of the script needs to be decoded base64), and that’s all, but I’m not testing this large file script