Html5 supports multi-image preview upload and drag-and-drop controls,

Html5 supports multi-image preview upload and drag-and-drop controls,

An easy-to-use control was found during Image Upload. Multiple images can be uploaded at the same time. You can click and select an image or drag the image to the upload box for direct upload, which is convenient and easy to use, the interface is also simple and can be directly used in projects.

First look at his style:

After selecting an image:

$ (Function () {// initialize the plug-in $ ("# demo "). zyUpload ({width: "650px", // width height: "400px", // width itemWidth: "120px", // itemHeight: "100px ", // file item height url: "/upload/UploadAction", // File upload path multiple: true, // whether multiple files can be uploaded dragDrop: true, // whether the file del can be dragged and uploaded: true, // whether the file finishDel can be deleted: false, // whether to delete preview after the file is uploaded/* external callback interface */onSelect: function (files, allFiles) {// select the file callback method lele.info ("the following files are selected currently:"); console.info (files); console.info ("files not uploaded before :"); console.info (allFiles) ;}, onDelete: function (file, surplusFiles) {// callback Method for deleting a file lele.info ("this file is deleted currently :"); console.info (file); console.info ("remaining files:"); console.info (surplusFiles) ;}, onSuccess: function (file) {// callback Method for successful file upload: lele.info ("this file has been uploaded successfully:"); console.info (file) ;}, onFailure: function (file) {// callback Method for file upload failure console.info ("This file Upload Failed:"); console.info (file) ;}, onComplete: function (responseInfo) {// callback Method for upload completion: lele.info ("File Upload completed"); console.info (responseInfo );}});});

Modify the configuration directly in demo. js. url: "/upload/UploadAction" put your Image upload action. This control is only processed by the front-end, and you have to write it yourself for background upload.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.