BootStrap Fileinput上傳插件使用實(shí)例代碼
0、效果圖
1、引入js、css(建議css放在html頭部,js加載在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 />//上傳按鈕 multiple為可多文件上傳 <input type="hidden" id="Doc" name="doc" value="" />//保存文件路徑
3、初始化
$("#uploaddoc").fileinput({ language: 'zh', uploadUrl: '/Form/upload',//后臺(tái)上傳方法 allowedFileExtensions: ['doc', 'docx'],//上傳文件擴(kuò)展名 shouUpload: false, showRemove: false, browseClass: 'btn btn-danger', maxFileSize: 5000, maxFileNum: 10, allowedPreviewTypes: null, previewFileIconSettings: { 'doc': '<i class="fa fa-file-word-o text-muted"></i>' }, previewFileExtSettings: { 'doc': function (ext) { return ext.match(/(doc|docx)$/i); } } });
4、回調(diào)方法
var List = new Array();//聲明保存上傳文件路徑數(shù)組對(duì)象 //上傳 - 刪除 $('#uploaddoc').on('filesuccessremove', function (event, key) { var abort = true; if (confirm("確定要?jiǎng)h除已上傳的文件嗎?")) { abort = false; } var index1; $.each(List, function (index, item) { if (item.KeyID == key) {//默認(rèn)fileinput.js的key與KeyID不一致,需要改動(dòng)源碼,詳情見下文 index1 = index; $.post("/Form/uploaddelete", { key: item.KeyID, path: item.path });//刪除以上傳到本地的文件 } }); List.splice(index1, 1); var path = ""; $.each(List, function (index, item) { path += item.path; }); $("#Doc").val(path);//修改保存的文件路徑 }); //取消上傳事件,左上角的取消按鈕 $('#uploaddoc').on('filecleared', function (event, files) { $.each(List, function (index, item) { $.post("/Form/uploaddelete", { key: "all", path: item.path }); }); List = new Array();//清空保存的文件路徑數(shù)組對(duì)象,這里是賦值給新的空對(duì)象,應(yīng)該可以優(yōu)化為刪除以保存的所有值 $("#Doc").val(""); }); //上傳 - 成功 $("#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、后臺(tái)上傳方法
//上傳方法 public JsonResult Upload() { HttpPostedFileBase file = Request.Files["file"]; if (file == null) { return Json(new { error = "上傳異常" }); } 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",//定義要?jiǎng)h除的action,沒有用到可刪掉 key = serverfilenname, path = webpath }); } catch (Exception ex) { return Json(new { error = "上傳異常" + ex }); } } //刪除本地文件方法 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、缺點(diǎn)
尚未研究預(yù)覽功能
尚有優(yōu)化空間
7、說明
代碼粘貼后可直接使用,后臺(tái)框架為.net mvc5,默認(rèn)母版頁有加載bootstrap樣式和js 如無樣式請(qǐng)?zhí)砑訉?duì)bootstrap的腳本
引用
插件api地址:http://plugins.krajee.com/file-input#events
上網(wǎng)查了好多相關(guān)資料 都不完整,最后只有這個(gè)api可以看了,最后終于找到左上角關(guān)閉按鈕的回調(diào)事件
總結(jié)
以上所述是小編給大家介紹的BootStrap Fileinput上傳插件使用實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
javascript實(shí)現(xiàn)十六進(jìn)制顏色值(HEX)和RGB格式相互轉(zhuǎn)換
這篇文章主要介紹了javascript實(shí)現(xiàn)十六進(jìn)制顏色值(HEX)和RGB格式之間的轉(zhuǎn)換,使用正則的方法實(shí)現(xiàn)RGB顏色轉(zhuǎn)換為16進(jìn)制,需要的朋友可以參考下2014-06-06使用window.print()前端實(shí)現(xiàn)網(wǎng)頁打印超詳細(xì)教程(含代碼示例)
前端實(shí)現(xiàn)打印功能的方法有很多,大家在網(wǎng)上隨便一搜就是一大堆,下面這篇文章主要給大家介紹了關(guān)于使用window.print()前端實(shí)現(xiàn)網(wǎng)頁打印的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06JS 實(shí)現(xiàn)Json查詢的方法實(shí)例
曾經(jīng)看過一個(gè)大牛寫的實(shí)現(xiàn)Json的一個(gè)模板類,今天突然沒事就來自己試著寫寫。還好,一些東西還記得,思路還算清晰。直接上代碼了2013-04-04js如何實(shí)現(xiàn)設(shè)計(jì)模式中的模板方法
都知道在js中如果定義兩個(gè)相同名稱的方法,前一個(gè)方法就會(huì)被后一個(gè)方法覆蓋掉,使用此特點(diǎn)就可以實(shí)現(xiàn)模板方法,感興趣的朋友可以了解下本文哈2013-07-07微信小程序?qū)崿F(xiàn)數(shù)字滾動(dòng)動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)數(shù)字滾動(dòng)動(dòng)畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07處理文本部分內(nèi)容的TextRange對(duì)象應(yīng)用實(shí)例
TextRange是用來表現(xiàn)HTML元素中文字的對(duì)象,是一個(gè)用于處理JavaScript對(duì)象文本部分內(nèi)容的一個(gè)對(duì)象2014-07-07