How To Send File To Php Via Jquery?

I try send a file via jQuery to a PHP file for processing.

Solution 1:

You need to use formdata . I am providing a example function which takes arguments ,i.e form refrence and functions callback to do stuff.This function binds event on your form submit. Try below-

functionsendAjaxForm(frm,callbackbefore,callbackdone)
    {
        var form = frm;
        form.submit(function(event){
            event.preventDefault();
            var formData = newFormData(this);
            var ajaxReq=$.ajax({
                url: $(this).attr('action'),
                type: $(this).attr('method'),
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: callbackbefore
                });
            ajaxReq.done(callbackdone);
        }); // submit done
    }

Now call that function as in your example

sendAjaxForm($('#upform'),function(){alert('sending');},function(data){alert("Data: " + data);})

Solution 2:

You need to take advantage of FormData() with use of xmlhttprequest. $.post() should not be used while performing a file upload with ajax because it doesn't use xmlhttprequest instead you should use $.ajax() or native js xmlhttprequest.

As you are using jQuery then you can do this with form submit instead:

$(document).ready(function(){
    $('#upform').submit(function(e){
      e.preventDefault();
      var fd = newFormData(document.querySelector(this));
      $.ajax({
         url: "help-uploader.php",
         type: "POST",
         data: fd,
         cache:false, // do not cache processData: false,  // requiredcontentType: false// requiredsuccess:function(data){
           console.log(data);
         },
         error:function(err){
           console.log(err);
         }
     });
   });
});

Share

You may like these posts

• 
  Html5 File Api - Send File To Server For Processing
• 
  Specification Document: Dom Text Nodes
• 
  Ie7 And Ie8: Float Clearing Without Adding Empty Elements
• 
  Html5 Canvas Images Are Not Loading Using Drawimage()