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 相关文章推荐
ext 代码生成器
Aug 07 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
jQuery ready函数滥用分析
Feb 16 Javascript
jquery 笔记 事件
Nov 02 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 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/07/18 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
js left,right,mid函数
2008/06/10 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
Python列表list操作相关知识小结
2020/01/29 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
工程力学硕士生的自我评价范文
2013/11/16 职场文书
大一新生军训时的自我评价分享
2013/12/05 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
2015年建党94周年演讲稿
2015/03/19 职场文书
黄河绝恋观后感
2015/06/08 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python
Python实现Hash算法
2022/03/18 Python