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 相关文章推荐
JavaScript写的一个自定义弹出式对话框代码
Jan 17 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
Angular数据绑定机制原理
Apr 17 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
解决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
php将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
农田水利实习自我鉴定
2013/09/19 职场文书
销售顾问的岗位职责
2013/11/13 职场文书
高中的自我鉴定
2013/12/16 职场文书
主持人婚宴答谢词
2014/01/28 职场文书
幼儿园教师个人反思
2014/01/30 职场文书
《燕子》教学反思
2014/02/18 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
Python3.10的一些新特性原理分析
2021/09/15 Python