A simple and practical upload file image plug-in and compatible with the mobile end Zyupload.js

1. Download the Zyupload plug-in package contains files such as:

2. In the/images/filetype folder, define the display icon for the uploaded file as shown:

3. Open Zyupload.js, modify the file icon after uploading to display the path as shown:

4. Calling the JS code

<link rel= "stylesheet" href= "~/content/assets/css/zyupload-1.0.0.min.css" >
<script type= "Text/javascript" src= "~/content/assets/js/zyupload.1.0.0.min.js" ></script>

<div id= "Zyupload_image" class= "Zyupload" ></div>

<script type= "Text/javascript" >

$ (function () {
Initializing plug-ins
$ ("#zyupload_image"). Zyupload ({
Width: "90%",//Width
Height: "Auto",//height
Itemwidth: "135px",//width of the file entry
ItemHeight: "115px",//height of the file entry
URL: "/system/[email protected]",//the path of the uploaded file I use the MVC route
FileType: ["JPG", "png", "gif", "JPG", "png", "GIF"],//types of uploaded files
filesize:512000,//size of upload file
Multiple:true,//can upload multiple files
Dragdrop:false,//Whether you can drag to upload files
Tailor:false,//whether the picture can be cropped
Del:true,//Whether files can be deleted
Finishdel:false,//whether to delete preview after uploading file is complete
/* Callback interface obtained externally */
Onselect:function (Selectfiles, allfiles) {//Select File callback method Selectfile: Currently selected file Allfiles: All files not yet uploaded
},
Ondelete:function (file, files) {//delete a file callback method file: Files that are currently being deleted files: file after deletion
},
Onsuccess:function (file, response) {//Upload successful callback method
},
Onfailure:function (file, response) {////Files upload failed callback method
Alert (' network busy, please try again later! ', ' hint ');
},
Oncomplete:function (response) {//upload completed callback method
Console.info ("File upload complete");
Alert (' File upload complete ', ' hint ');
Window.location.href = window.location.href;
}
});
});

5. Background Processing business logic

A simple and practical upload file image plug-in and compatible with the mobile end Zyupload.js