通过Ajax将图像上传到imm.io

Question

I have trying to create a web page ussing php and ajax to let users upload files to imm using its API:

http://imm.io/api/ (feel free to take a look because it is just a simple example)

I would like to know how to upload dynamically using jquery, the idea is reproduce the workflow below:

1. the user complete the form
2. when the submit button is clicked, it will take the form values and sent them to imm.io
3. wait until the json response is received
4. show the error/success message updating a div

My code:

var request = $.ajax({
      url: 'http://imm.io/store/',
      type: "POST",
      cache: false,
      data: { ??? },  //here my problem resides
      dataType: "json"
    });

    //waiting ultil the request be finished
    $.when( request ).then(function(data, textStatus, jqXHR){
        console.log(data);
    });

If you note above, the ??? represents where the problem resides, because I don't know how to sent the file value into the json format thar "data" needs.

Seeing some questions here in SO looks like ajax is not able to send files.

• how to send file input using jquery?
• How can I upload files asynchronously?

So, I just need a hand to guide to the right direction.... One more thing: I never has used the CURL php extension, but I thing that could be another option, right?

EDIT, I forgot tell you why I did not use the plugins mencioned in the questions above: because that plugins don't wait until the request was completed, so, I never get the real response form the server.

Answer 1

I found a good tutorial on this. Also a jquery plugin

Hope that helps ;)