jQuery file Upload and ajax

Question

So, I have the following form and js/php:

php

 <form enctype="multipart/form-data">
    <input id="fileupload"  type="file" name="files[]" class="files " onChange="UploadImage" accept='image/*'/>
    <input type="button" class="submit_form" value="submit">    
</form>

<?php 
   add_action( 'wp_ajax_UploadImage', 'UploadImage' );
   function UploadImage()
   {
     $upload_dir = wp_upload_dir();
     $files = $_FILES['files']; 
   //Some function
   }
?>

JS

function UploadImage(e)
{
jQuery('#fileupload').fileupload({
    url: upload_image.ajax_url,
});

if(jQuery('#fileupload')) {
    var form = document.forms.namedItem("upload_video"); 
    var formdata = new FormData(form); 
    formdata.append('action', 'UploadImage');
    jQuery.ajax({           
        success : function(data){                   
                alert('sddsf');
            }
    })
}
};

As you can see from here, when an image is selected using Blueimp jQuery File upload (which the js is not properly written), I want the image file to be handled by the php function.

In other words, the js is not correctly written and I am not sure how to initiate the plugin then when the image is selected, it is processed by the php function via ajax (meaning, how do I parse the file info to php function via ajax?)

What is your exact question? Is it related to the jQuery plugin or to the PHP handling? For the latter: does the formdata get sent to the php file correctly? — Jan
– Jan, Commented Nov 25, 2015 at 21:13
Well, that's the thing. I am not sure how to check whether the formdata is sent to the php file or not. I guess the question is about whether the js for the plugin is written correctly and if it is sending the formdata to the php. — Steve Kim
– Steve Kim, Commented Nov 25, 2015 at 21:35
You might want to install a js console (e.g. firebug for FF) and check this first. — Jan
– Jan, Commented Nov 25, 2015 at 21:54
The plugin already uses AJAX behind the scenes to upload your image. So I don't understand why you're manually calling jQuery.ajax. Why don't you just use $('#fileupload').fileupload({ done: callbackFunction } ? — Lucas Pottersky
– Lucas Pottersky, Commented Nov 26, 2015 at 13:48

Lucas Pottersky · Accepted Answer · 2015-11-26 13:59:38Z

1

Don't use $.ajax directly. The plugin already does that behind the scenes.

Here's a working example, based on your code, but adapted to run on JSFiddle:

$(document).ready(function(){
    var url = '/echo/json/';
    var formdata = {json: JSON.stringify({field1: 'value1'})};

    jQuery('#fileupload').fileupload({
        url: url,
        formData : formdata,        
        dataType: 'json',
        type: "POST",
        contentType:false,
        processData:false,
        success : function(data){                   
            alert('success...');
            console.dir(data);
        }
    });       
});

Demo: http://jsfiddle.net/pottersky/8usb1sn3/3/

answered Nov 26, 2015 at 13:59

Lucas Pottersky

1,9536 gold badges25 silver badges41 bronze badges

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

Collectives™ on Stack Overflow

jQuery file Upload and ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related