CODEWITHSUNDEEP
phpjqueryfile-upload
user49226
user49226

Reputation: 151

jQuery - receiving the $_FILES array using $.post

I am attempting to submit a form via jQuery. My form contains fields and a file that must be uploaded. It is of type ENCTYPE="multipart/form-data".

I can receive all my field values using: post = $('#myForm').serialize(); But how do I receive the $_FILES array? I need this to process the uploaded file.

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

Upvotes: 6

Views: 40944

Answers (6)

Luis Neighbur
Luis Neighbur

Reputation: 11

Use FormData

<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>

Upvotes: 1

ajay
ajay

Reputation: 11

Form contains a file input, but is missing method=POST and enctype=multipart/form-data on the form. The file will not be sent

Upvotes: 1

user267014
user267014

Reputation:

It's possible, but not working 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 );
    });

});

upload side script need decode base64 ) and that is all but i don't test this script on big size file

Upvotes: 0

Ionuț G. Stan
Ionuț G. Stan

Reputation: 179119

If you can control the environment, like, say, you're writing an admin app for an intranet in which you recommend the browser, then real AJAX file uploads are possible with Firefox 3 and above. In all other cases, the iframe workaround or a Flash based uploader is the way to go.

Upvotes: 0

Bruce Aldridge
Bruce Aldridge

Reputation: 2937

jquery form is the best way to do it, 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

Upvotes: 12

Paolo Bergantino
Paolo Bergantino

Reputation: 488404

You cannot upload files through javascript.

Check out this related question:
Is it possible to use Ajax to do file upload?

Essentially, the two most popular ways of "faking" AJAX for file uploads is using a Flash plugin such as SWFUpload or submitting the form to a hidden iframe that processes the request.

Upvotes: 11

Related Questions