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控制上传文件的大小
Oct 26 Javascript
javascript js cookie的存储,获取和删除
Dec 29 Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
Layui 动态禁止select下拉的例子
Sep 03 Javascript
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
JS前端轻量fabric.js系列物体基类
Aug 05 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读取IMAP邮件
2006/10/09 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
javascript date格式化示例
2013/09/25 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
Python3数字求和的实例
2019/02/19 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
介绍一下linux文件系统分配策略
2012/11/17 面试题
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
linux面试相关问题
2013/04/28 面试题
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
农民工预备党员思想汇报
2014/09/14 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
运动会5000米加油稿
2015/07/21 职场文书