Bootstrap fileInput upload plugin usage instance code

0, effect map

BootStrap Fileinput上传插件使用实例代码 1, introduced JS, CSS (recommended CSS in HTML head, JS loaded at the bottom of HTML)

       2, HTML    // Upload button Multiple is the multi-file upload 
// save file path

3, Initialization
   $ ("# UPLOADDOC"). FileInput ({Language: 'EN', UPLOADURL: '/ FORM / UPLOAD', // Upload Method allowedFileExtensions: [ 'doc', 'docx'], // upload file extension shouUpload: false, showRemove: false, browseClass: 'btn btn-danger', maxFileSize: 5000, maxFileNum: 10, allowedPreviewTypes: null, previewFileIconSettings: { 'DOC': ' '}, previewFireExtSettings: {'doc': function (ext) {return ext.match (/ (doc | docx) $ / i);}}}); 
4, callback method


var list = new array (); // declaration Upload file path array object // Upload – Delete $ (‘# UPLOADDOC’). ON (‘FileSuccessRemove’, Function (Event, Key) {var Abort = true; if (confirm (“OK (” OK (“OK (” OK (“OK (” OK (“OK (” OK (“OK (” OK (“OK (” OK (“OK (” OK (“OK (” To delete the uploaded file? “)) {Abort = false;} var index1; $.., (List, function (index, item) {if (item.keyid == key) {// default fileInput.js keyid is inconsistent with KeyID, you need to change the source code See “Details”, INDEX1 = Index; $ .post (“/ form / uploaddelete”, {key: item.keyid, path: item.path}); // Delete to local file}}}); List.Splice (Index1, 1); VAR PATH = “”; $. Each (List, Function (Item) {Path + = item.path;}); $ (“# doc”). VAL (PATH); // Modify the saved file path}); // Cancel the upload event, the cancel button $ (‘# UPLOADDOC’) in the upper left corner (‘FileRed’, FUNCTION (Event, FiLes) {$ .each (List, Function (Item) {$ .post (“/ form / uploaddelete”, {key: “all”, path: item.path});}; list = new array ( ); / / Clear save file path array object, here is assigned to new empty objects, should be optimized to delete all values ​​$ (“# 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; {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); ReturnJSON (new {url = “/ form / uploaddelete”, // Defines the action to be deleted, no use of Key = ServerFilenname, Path = WebPath});} catch (exception ex) {returnjson (new {Error = “Upload exception” + EX});}} // Remove local file method public JSONRESULT UPLOADELETE () {Try {var key = Request.Params [“key”]; var path = request.params [“path”]; IF (string.isnullorempty (key) || string.isnullorempty (path) {returnjs (false, jsonrequestbehavior.deget);} 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.deget);}}} catch (exception) {returnjs (false, jsonrequestbehavior.deget);}}

6, Disadvantages
 There is no preview function   There are still optimized space 
7, indicating that

can be used directly after paste, the background frame is .NET MVC5, default master page There are loading bootstrap styles and JS, if you have no pattern, add a script for bootstrap BootStrap Fileinput上传插件使用实例代码

Reference

Plug-in API address: http://plugins.krajee.com/file-input#events
The Internet has checked a lot of related information is incomplete. Finally, only this API can look, finally found the callback event of the left corner close button
   Summary 
The above is the use of the Bootstrap fileInput to send the plug-in to everyone, I hope to help everyone. If you have any questions, please leave a message, the small package will reply to everyone. Thank you very much for your support of Tumi Cloud Website!

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment