Bootstrap Fileinput 4.4.7文件上传实例详解


Posted in Javascript onJuly 25, 2018

本实例所做功能为发送带附件邮件,可以上传多个附件,操作为选择一个附件以后自动上传,然后继续选择附件,填写完表单其他信息,点击保存发送带附件邮件。

HTML标签

<input id="fileUpload" type="file" name="file" data-show-preview="true" multiple/>

js初始化,设置全局文件名参数

var fileName = [];
function initFileInput(id, url) {
    $("#" + id).fileinput({
      language: 'zh', 
      uploadAsync:false,
      uploadUrl:url,
      browseClass: "btn btn-secondary",
      textEncoding:"UTF-8",
      showUpload: false,
      showPreview :true,
      dropZoneEnabled: false,
      maxFileCount:5,
      fileActionSettings:{
        showUpload: true
      },
      enctype:'multipart/form-data',
      msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
    }).on("filebatchselected", function(event, files) {
      $("#fileUpload").fileinput("upload");
    }).on("filebatchuploadsuccess", function (event, data, previewId, index){
      if(data.response.success == true)
      {
        fileName.push(data.response.fileName);
      }else{
        alert("上传失败!");
      }
      $("#fileUpload").fileinput("clear");
      $("#fileUpload").fileinput("reset");
    }).on('fileerror', function(event, data, msg) {
       alert(msg);
    });
  }

java后台上传文件代码

@RequestMapping(value="/fileupload")
  @ResponseBody
  public Map<String, Object> fileUpload(HttpServletRequest request, HttpServletResponse response) {
    ResourceBundle bundle = PropertyResourceBundle.getBundle("application");
    MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;
    Map<String,MultipartFile> fileMap = multipartRequest.getFileMap();
    String rootPath = bundle.getString("upLoadUrl");
    String filePath = rootPath;
    Map<String, Object> map = new HashMap<>();
    map = uploadFiles(filePath,fileMap);
    return map;
  }

实际上传操作,返回上传操作经过处理的文件名,保证服务器端文件名唯一

public Map<String, Object> uploadFiles(String savePath,Map<String,MultipartFile> fiLeMap){
    Map<String, Object> map = new HashMap<>();
    try {
      String fileName = "";
      if(fiLeMap!=null){
        for(Map.Entry<String, MultipartFile> entity:fiLeMap.entrySet()){
          MultipartFile f = entity.getValue();
          if(f != null && !f.isEmpty()){
            String uuid = UUID.randomUUID().toString();
            fileName = uuid + "#" + f.getOriginalFilename();
            File newFile = new File(savePath + "/" + fileName); 
            f.transferTo(newFile);
          }
        }
      }
      map.put("success", true);
      map.put("fileName", fileName);
      return map;
    }catch (Exception e) {
      map.put("success", false);
      return map;
   }
}

ajax提交其他表单参数和所传附件文件名集合

$.ajax({
      type: "POST",
      url: 所需要请求地址,
      dataType: "json",
      traditional:true,
      data: {
        service:$("#service").select2('val').replace("All",""),
        startTime:$("#start").val(),
        endTime:$("#end").val(),
        reason:$("#reason").val(),
        fileName:JSON.stringify(fileName),
        outterEmail:isOutterEmail,
        innerEmail:isInnerEmail,
        isSendEmail:isSendEmail,
        subService:$("#subService").select2('val'),
        runningStatus:$("#runningStatus").select2('val')
      },
      success: function(data){
        $("#loadingModal").modal("hide");
        fileName.splice(0,fileName.length);
        alert(data.msg);
        if(data.success) {
          location.href = "revision";
        }
      },
      error:function(xhr) {
        $("#loadingModal").modal("hide");
        alert("保存失败");
      }
    });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 插件学习(六)
Aug 06 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
Nov 25 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
浅谈vue的踩坑路
Aug 31 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 #Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 #Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 #Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 #Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 #jQuery
详解Vue源码学习之callHook钩子函数
Jul 25 #Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 #Javascript
You might like
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
2015/03/24 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
python使用分治法实现求解最大值的方法
2015/05/12 Python
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
Python项目打包成二进制的方法
2020/12/30 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
西尔斯百货官网:Sears
2016/09/06 全球购物
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
世界上最大的乐谱选择:Sheet Music Plus
2020/01/18 全球购物
什么是接口(Interface)?
2013/02/01 面试题
任命书怎么写
2014/06/04 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
房屋认购协议书
2015/01/29 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL