BootStrap文件输入上传插件使用实例代码

0、效果图

1、引入js、css(建议钢性铸铁放在超文本标记语言头部，js加载在超文本标记语言底部)

链接href=' ~/内容/文件输入。量滴CSS“rel=”外部no follow“rel=”样式表'/脚本src=' http : ~/脚本/jquery-1。10 .2 .量滴js /脚本脚本src=' http : ~/脚本/文件输入。js /脚本脚本src=' http : ~/脚本/zh。js /脚本2、html

输入类型=' file ' id=' uploaddoc ' name=' file ' class=' file ' multiple///上传按钮多个的为可多文件上传输入类型='隐藏id='文档'名称='文档'值='' ///保存文件路径3、初始化

$('#uploaddoc ').fileinput({ language: 'zh '，uploadurls : '/Form/upload '，//后台上传方法允许文件扩展名s 3360[' doc '，' docx']，//上传文件扩展名shouUpload: false，showRemove: false，browseClass: 'btn btn-danger '，maxFileSize: 5000，maxFileNum: 10，allowedPreviewTypes: null，previewpileicontsettings : { ' doc ' : ' I class=' fa-fa-file-word-o-text-muted '/I ' }，previewpileextsettings :4、回调方法

var列表=新数组();//声明保存上传文件路径数组对象//上传-删除$('#uploaddoc ').on('filesuccessremove '，function (event，key){ var abort=true；如果（确认('确定要删除已上传的文件吗？')){ abort=false} var index1$。每个（列表、函数（索引、项目){ if(项目KeyID==key) {//默认fileinput.js的键与密钥身份不一致，需要改动源码，详情见下文index1=索引；$.发布('/Form/uploaddelete '，{ key: item .KeyID，路径：项。路径})；//删除以上传到本地的文件} });List.splice(index1，1)；定义变量路径=' ';$.每个（列表、函数（索引、项目){ path=item . path })；$('#Doc ').val(路径);//修改保存的文件路径});//取消上传事件，左上角的取消按钮$('#uploaddoc ').打开(' filecleared '，函数（事件，文件){ $。每个（列表、函数（索引、项目){ $。post('/Form/uploaddelete '，{ key: 'all '，path : item。路径})；});列表=新数组();//清空保存的文件路径数组对象，这里是赋值给新的空对象，应该可以优化为删除以保存的所有值$('#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.readerlist。push({ path :响应。路径，KeyID: previewId }) $('#Doc ').val($(“# Doc”).val()(响应。路径)；//$('#Doc ').val(列表);});

5、后台上传方法

//上传方法公共JsonResult Upload(){ httptedfilebase file=Request .文件[' file ']；if(文件==null){ 0返回Json(新{错误='上传异常' });} var ext=路径GetExtension(文件. FIlename)；变量文件名=路径getfilename不带文本扩展(文件. FIlename)；var serverfilenname=Guid .NewGuid().ToString(' n ')' _ ' filename ext；尝试{ var路径='/File '；var dic=字符串。格式(' {0}/{1}/{2}/{3} ',路径，日期时间ToString()，DateTime .ToString()，DateTime .今天。一天。tostring())；if(！目录。存在（服务器。地图路径(dic)))(目录。创建目录（服务器. MapPath(DIC))；} var webpath=字符串。格式(“{0}/{1}”、dic、server filename)；var serverpath=路径。联合收割机（服务器. MapPath(dic)，server filename)；文件另存为(服务器路径);返回JSON(new { URL='/FORm/upload delete '，//定义要删除的行动，没有用到可删掉key=serverfilenname，path=web path })；} catch(Exception ex){ return Json(new { error='上传异常ex })；} } //删除本地文件方法public JsonResult UpLoadDelete(){ try { var key=Request .params[' key ']；变量路径=请求参数['路径']；如果(字符串IsNullOrEmpty(key) || string .IsNullOrEmpty(path)){ return Json(false，JsonRequestBehavior .DenyGet)；}路径=服务器. MapPath(路径);如果（系统。文件存在（路径)){系统IO。文件。删除(路径);返回Json(true，JsonRequestBehavior .DenyGet)；} else { return Json(false，JsonRequestBehavior .DenyGet)；} } catch(Exception){ return Json(false，JsonRequestBehavior .DenyGet)；} } 6、缺点

尚未研究预览功能

尚有优化空间

7、说明

代码粘贴后可直接使用，后台框架为。净mvc5，默认母版页有加载引导程序样式和射流研究…如无样式请添加对引导程序的脚本

引用

插件美国石油学会(美国石油协会)地址：http://插件。克拉吉。com/文件输入#事件

上网查了好多相关资料都不完整，最后只有这个美国石油学会(美国石油协会)可以看了，最后终于找到左上角关闭按钮的回调事件

总结

以上所述是小编给大家介绍的引导程序文件输入上传插件使用实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！