0、效果圖
成都創(chuàng)新互聯(lián)專注于吉縣企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,購(gòu)物商城網(wǎng)站建設(shè)。吉縣網(wǎng)站建設(shè)公司,為吉縣等地區(qū)提供建站服務(wù)。全流程按需設(shè)計(jì)網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
1、引入js、css（建議css放在html頭部，js加載在html底部）
2、html
//上傳按鈕 multiple為可多文件上傳 //保存文件路徑
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': ''
},
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)源碼，詳情見(jiàn)下文
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，沒(méi)有用到可刪掉
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、說(shuō)明
代碼粘貼后可直接使用，后臺(tái)框架為.net mvc5，默認(rèn)母版頁(yè)有加載bootstrap樣式和js 如無(wú)樣式請(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ì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
