How to get uploaded picture information via JS (temporary save path, name, size) and then pass Ajax to the backend?

Today in the forum to see such a problem, it is necessary to edit the collection.

Problem Description: How to get uploaded picture information via JS (temporary save path, name, size) and then pass to the backend via Ajax

The main topic is received by jquery

<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  varthis. files[0];}

The main topic wants to use the Ajax Post method to upload the relevant information of the image to the backend,
The received file is an object file,
How do I convert to a data format that can be delivered using post?

When I saw the subject, I thought it was not easy, just pass the file through Json.stringify (Note: stringify () is used to parse the string from an object), the code is as follows:

var input = document.getElementById ("C_pic"); Input.addeventlistener (' Change ', ReadFile,false ); function  varthis. Files[0]; var file_json =// print out is: {}$.post (', File_json);}

The found print is an empty object: {}; have the trouble to tell, thank you!

So change a way of thinking with uploadfile plug-in or Baidu's Webuploader, which jquery file Upload is a jquery image upload component, support multi-file upload, cancel, delete, pre-upload thumbnail preview, list display image size, Support Upload progress bar display, support the server side of various dynamic language development.
If HTML5 is supported, it can be FormData implemented using AJAX uploads as well.

How to get uploaded picture information via JS (temporary save path, name, size) and then pass Ajax to the backend?