Use ajaxfileupload. js to upload files via ajax php _ jquery

This article mainly introduces how to use ajaxfileupload. js implements ajax to upload files to the php version. For more information, see whether PHP or other server scripts. With JavaScript, you can upload files in Ajax mode. Although jQuery does not provide such a simplified function, many plug-ins can implement it. Among them, the ajaxfileupload. js provided by Phpletter.com is a lightweight plug-in, and the writing method is very similar to the Global Method $. post () provided by jQuery, which is easy to use.
However, this plug-in is too simplified. In addition to providing the path for uploading files, you cannot transmit additional values to the backend server. So I modified the script and added a data object parameter.

I. Principles

I am using PHP as a server script. I will mention how to use the move_uploaded_file () method to upload files in almost every small PHP book. I will not elaborate on it here. I want to talk about the principle of using Ajax for upload.
Because the jQuery library is used all the time, when you think of Ajax, the first reaction is to try the $. post () method, use each selector to get the value in the file box, and then submit it to the backend server. Of course, it turns out that this is not feasible. (Because of this problem, I also checked a lot of information and provided a lot of ASP scripts on the Internet. I really don't know what to say ..)
Back to the topic, it is not difficult to implement Ajax upload. There are also many methods. The Phpletter.com ajaxfileupload. js plug-in mentioned in this article uses iframe. This is also a common method for uploading without refreshing new pages when JavaScript scripts are not used. (This method is used to write logs in the bo-blog background)
While ajaxfileupload. the js plug-in is also very simple, that is, first use the jQuery selector to obtain the file path value in the file upload box, then dynamically create an iframe, and create a new file box in it, the post method is provided for submission to the background. Finally, return the result to the foreground.

Ii. Use

The use of the ajaxfileupload. js plug-in is simple.
The front-end HTML code is similar: