The BootStrap Fileinput upload plug-in uses the instance code, bootstrapfileinput

The BootStrap Fileinput upload plug-in uses the instance code, bootstrapfileinput

0,

1. Introduce js and css (it is recommended that css be placed in the html header and js be loaded at the bottom of html)

<link href="~/Content/fileinput.min.css" rel="external nofollow" rel="stylesheet" /><script src="~/scripts/jquery-1.10.2.min.js"></script><script src="~/scripts/fileinput.js"></script><script src="~/scripts/zh.js"></script>

2. html

<Input type = "file" id = "uploaddoc" name = "file" class = "file" multiple/> // The multiple upload button indicates that multiple files can be uploaded. <input type = "hidden "id =" Doc "name =" doc "value =" "/> // save the file path

3. Initialization

$ ("# Uploaddoc "). fileinput ({language: 'zh ', uploadUrl:'/Form/upload', // The background upload method allowedFileExtensions: ['Doc', 'docx'], // Upload File Extension shouUpload: false, showRemove: false, browseClass: 'btn btn-danger ', maxFileSize: 5000, maxFileNum: 10, allowedPreviewTypes: null, previewFileIconSettings: {'Doc': '<I class = "fa-file-word-o text-muted"> </I>'}, previewFileExtSettings: {'Doc ': function (ext) {return ext. match (/(doc | docx) $/I );}}});

4. Callback Method

Var List = new Array (); // declare to save the Array object of the Upload File Path // upload-delete $ ('# uploaddoc '). on ('filesuccessdelete', function (event, key) {var abort = true; if (confirm ("are you sure you want to delete the uploaded file? ") {Abort = false;} var index1; $. each (List, function (index, item) {if (item. keyID = key) {// default fileinput. the js key is inconsistent with the KeyID. You need to change the source code. For details, see index1 = index; $. post ("/Form/uploaddelete", {key: item. keyID, path: item. path}); // delete the file uploaded to the local device}); List. splice (index1, 1); var path = ""; $. each (List, function (index, item) {path + = item. path;}); $ ("# Doc "). val (path); // modify the path of the saved file}); // cancel the upload event. in the upper left corner, click the cancel button $ ('# uploaddoc '). on ('filecleared', function (event, files) {$. each (List, function (index, item) {$. post ("/Form/uploaddelete", {key: "all", path: item. path}) ;}); List = new Array (); // clears the Array object of the saved file path, which is assigned to the new empty object, it should be optimized to delete all values to save $ ("# Doc "). val ("") ;}); // upload-success $ ("# uploaddoc "). on ("fileuploaded", function (event, data, previewId, index) {var form = data. form, files = data. files, extra = data. extra, response = data. response, reader = data. reader; List. push ({path: response. path, KeyID: previewId}) $ ("# Doc "). val ($ ("# Doc "). val () + response. path); // $ ("# Doc "). val (List );});

5. Background upload Method

// Upload method public JsonResult Upload () {HttpPostedFileBase file = Request. files ["file"]; if (file = null) {return Json (new {error = "Upload exception"});} var ext = Path. getExtension (file. fileName); var filename = Path. getFileNameWithoutExtension (file. fileName); var serverfilenname = Guid. newGuid (). toString ("n") + "_" + filename + ext; try {var path = "/File"; var dic = string. format ("{0}/{1}/{2}/{3}", path, DateTime. Today. Year. ToString (), DateTime. Today. Month. ToString (), DateTime. Today. Day. ToString (); if (! Directory. exists (Server. mapPath (dic) {Directory. createDirectory (Server. mapPath (dic);} var webpath = string. format ("{0}/{1}", dic, serverfilenname); var serverpath = Path. combine (Server. mapPath (dic), serverfilenname); file. saveAs (serverpath); return Json (new {url = "/Form/uploaddelete", // defines the action to be deleted. The key = serverfilenname cannot be deleted, path = webpath});} catch (Exception ex) {return Json (new {error = "Upload Exception" + ex });}} // Method for deleting local files public JsonResult UpLoadDelete () {try {var key = Request. params ["key"]; var path = Request. params ["path"]; if (string. isNullOrEmpty (key) | string. isNullOrEmpty (path) {return Json (false, JsonRequestBehavior. denyGet);} path = Server. mapPath (path); if (System. IO. file. exists (path) {System. IO. file. delete (path); return Json (true, JsonRequestBehavior. denyGet);} else {return Json (false, JsonRequestBehavior. denyGet) ;}} catch (Exception) {return Json (false, JsonRequestBehavior. denyGet );}}

6. Disadvantages

Preview function not studied

Space for Optimization

7. Description

After the code is pasted, you can directly use it. The background framework is. net mvc5. By default, the master page loads bootstrap styles and js. If no styles are available, add scripts for bootstrap.

Reference

Plug-in api address: http://plugins.krajee.com/file-input#events

I checked a lot of relevant information on the Internet, but I can only view this api. Finally, I found the callback event in the top left corner of the page.

Summary

The above section describes how to use the BootStrap Fileinput upload plug-in to use the instance code. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!