When uploading pictures, I found a very useful control. It supports uploading multiple pictures at the same time. You can click to select a picture, or you can drag the picture to the upload box and upload it directly. It is convenient, easy to use, and the interface is simple. You can basically put it directly. Use it in the project.
Let’s take a look at his style first:
After selecting an image:
$(function(){ // Initialize plug-in $(#demo).zyUpload({ width : 650px, // width height : 400px, // width itemWidth : 120px, // width of file item itemHeight : 100px, // file The height of the item url: /upload/UploadAction, // The path of the uploaded file multiple: true, // Whether multiple files can be uploaded dragDrop: true, // Whether the file can be dragged and uploaded del : true, // Whether the file can be deleted finishDel : false, // Whether the preview is deleted after the file upload is completed /* Externally obtained callback interface */ onSelect: function(files, allFiles ){ //Callback method for selecting files console.info(The following files are currently selected:); console.info(files); console.info(Files not uploaded before:); console.info(allFiles); }, onDelete: function(file, surplusFiles){ // Callback method for deleting a file console.info (currently deleted file:); console.info(file); console.info (currently remaining files:); console.info (surplusFiles); }, onSuccess: function(file){ // Callback method for successful file upload console.info(This file was uploaded successfully:); console.info(file); }, onFailure: function(file){ // The callback method for file upload failure console.info(This file upload failed:); console.info(file); }, onComplete: function(responseInfo){ // The callback method for upload completion console.info(File upload completed); console .info(responseInfo); } }); });Modify the configuration directly in demo.js, url: /upload/UploadAction and put your image upload action. This control is only foreground processing, you have to write the background upload yourself.
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.