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 html()等方法介绍
Nov 18 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
jQuery获取和设置表单元素的方法
Feb 14 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 Javascript
微信小程序轮播图swiper代码详解
Dec 01 Javascript
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删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
js中cookie的使用详细分析
2008/05/28 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
NumPy 如何生成多维数组的方法
2018/02/05 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
python 实现单例模式的5种方法
2020/09/23 Python
Python通过len函数返回对象长度
2020/10/22 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
美国保健品专家:Life Extension
2018/05/04 全球购物
工程概预算专业毕业生求职信
2013/10/04 职场文书
精彩广告词大全
2014/03/19 职场文书
《锄禾》教学反思
2014/04/08 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题
python使用BeautifulSoup 解析HTML
2022/04/24 Python
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android