BootStrap Fileinput上传插件使用实例代码


Posted in Javascript onJuly 28, 2017

0、效果图

BootStrap Fileinput上传插件使用实例代码

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',//后台上传方法 
    allowedFileExtensions: ['doc', 'docx'],//上传文件扩展名 
    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、回调方法

var List = new Array();//声明保存上传文件路径数组对象 
  //上传 - 删除 
  $('#uploaddoc').on('filesuccessremove', function (event, key) { 
    var abort = true; 
    if (confirm("确定要删除已上传的文件吗?")) { 
      abort = false; 
    } 
    var index1; 
    $.each(List, function (index, item) { 
      if (item.KeyID == key) {//默认fileinput.js的key与KeyID不一致,需要改动源码,详情见下文 
        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();//清空保存的文件路径数组对象,这里是赋值给新的空对象,应该可以优化为删除以保存的所有值 
    $("#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); 
  });

BootStrap Fileinput上传插件使用实例代码

5、后台上传方法

//上传方法  
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",//定义要删除的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、缺点

尚未研究预览功能

尚有优化空间

7、说明

代码粘贴后可直接使用,后台框架为.net mvc5,默认母版页有加载bootstrap样式和js 如无样式请添加对bootstrap的脚本

引用

插件api地址:http://plugins.krajee.com/file-input#events 

上网查了好多相关资料 都不完整,最后只有这个api可以看了,最后终于找到左上角关闭按钮的回调事件

总结

以上所述是小编给大家介绍的BootStrap Fileinput上传插件使用实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 目录列举函数
Nov 06 Javascript
javascript parseInt 函数分析(转)
Mar 21 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 Javascript
JavaScript页面模板库handlebars的简单用法
Mar 02 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
解决React Native端口号修改的方法
Jul 28 #Javascript
vue+vux实现移动端文件上传样式
Jul 28 #Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 #Javascript
vue使用vue-cli快速创建工程
Jul 28 #Javascript
用JS实现简单的登录验证功能
Jul 28 #Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 #Javascript
vue中七牛插件使用的实例代码
Jul 28 #Javascript
You might like
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
深入分析php之面向对象
2013/05/15 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
自定义jQuery选项卡插件实例
2013/03/27 Javascript
浅析js封装和作用域
2013/07/09 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
js实现随机数小游戏
2019/06/28 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
Python import用法以及与from...import的区别
2015/05/28 Python
python爬取拉勾网职位数据的方法
2018/01/24 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
法律专业自荐信
2014/06/03 职场文书
教师理论学习心得体会
2016/01/21 职场文书
资产移交协议书
2016/03/24 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python
MySQL分库分表详情
2021/09/25 MySQL