Get uploaded image information via JS (temporary save path, name, size) and then pass Ajax to the backend method _javascript tips

Project requirements: How to get uploaded image information via JS (temporary save path, name, size) and then pass Ajax to the backend

The main question is to use jquery to receive

<input name= "C_pic" id= "c_pic" type= "file" class= "file" >

The method used is:

var input = document.getElementById ("C_pic");
Input.addeventlistener (' Change ', readfile,false);
function ReadFile () { 
var file = this.files[0]; 
}

The main want to use the Ajax post method to upload pictures of the relevant information to the backend, received the file is an object file, how can I convert the data format to be able to pass the post?

When I saw this topic, I thought it was not easy, just put file through json.stringify (Note: stringify () to parse out the string from an object), the code is as follows:

var input = document.getElementById ("C_pic");
Input.addeventlistener (' Change ', readfile,false);

function ReadFile () { 
var file = this.files[0];
var File_json = json.stringify (file);
Console.log (File_json); Print out is: {}
$.post (", File_json);
}

Found to be printed out is an empty object: {}; know the trouble to tell, thank you!

So changed a way of thinking with UploadFile plug-in or Baidu Webuploader, where jquery file Upload is a jquery image upload component, support multiple file upload, cancel, delete, upload thumbnail preview, list display picture size, Support Upload progress bar display, support a variety of dynamic language development server side.
If HTML5 is supported, it can be implemented using Formdata Ajax uploads.

The above content is small to share through JS to get uploaded picture information (Temporary save path, name, size) and then through the Ajax pass to the back end of the method, I hope to help.