Shulou(Shulou.com)06/03 Report--

This article mainly introduces the JQuery file upload plug-in JQuery.upload.js how to use, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

JQuery file upload plug-in, this plug-in is very small, easy to use, but the effect is great.

Note: the JQuery version requires 1.8or above, if there is no effect, then check the JQuery version, if it is 1.8and above, then the .size () in the plug-in source code needs to be replaced with .length. If you ask me for the source code after 2019-12-30, don't worry about this problem, it has been corrected.

Take a look at the effect picture first.

Is it very simple and refreshing, the background Java file receiving class will not be posted, it is the same.

Note: in order to succinctly receive information about uploaded files, the backend adds the field 'upload'' to all entity classes that involve uploading files.

1. HTML part:

Just add a line:

Description: action: the url that receives files, such as action= "/ userinfo/upload" data-num: the number of files allowed to be uploaded, such as data-num= "2" data-type: the format in which files are allowed to be uploaded, such as data-type= "jpg,pdf,docx" data-size: the size limit of a single file, in KB, such as data-size= "10240" (10m) data-value: after the upload is not successful The information received (actually useless) in addition: through the developer mode of the browser, you can see that the format of the source code for each operation is as follows (the unimportant code has been deleted): the current situation and development countermeasures of road transport informatization construction in China. Pdf 2015-07-15 _ Application for Project subsidy from the Information Technology Research and Development Department .docx

Note: the form of name='upload' is actually in the form of D:\ uploadfile\ 201811\ img20181101164635272.doc,D:\ uploadfile\ 201811\ img20181101164643973.pdf, the schematic diagram of our detection device and the vibration description to be tested. Doc, the present situation and development countermeasures of road transport informatization construction in China. Pdf

2. JS part:

There is only one line: $("# case"). Upload ()

In order to save the original file name and the full path of the file on the server at the same time, you need to add the following code before submitting the policy to pass the original name and save path of the file through name= "upload" (for files only, the picture does not have the original file name)

$(".filename") .each (function () {$("[name=upload]") .val ($("[name=upload]") .val () +','+ $(this) .html ());}) Thank you for reading this article carefully. I hope the article "how to use the JQuery file upload plug-in JQuery.upload.js" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.