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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
通用JS事件写法实现代码
Jan 07 Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 Javascript
JavaScript随机数的组合问题案例分析
May 16 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
虫族 ZERG 概述
2020/03/14 星际争霸
php远程下载类分享
2016/04/13 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
Vue精简版风格概述
2018/01/30 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
布同 统计英文单词的个数的python代码
2011/03/13 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
Python如何调用JS文件中的函数
2019/08/16 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
轻松制作精彩视频:Animoto
2018/09/19 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
园林施工员岗位职责
2013/12/11 职场文书
助人为乐表扬信范文
2014/01/14 职场文书
个人求职信格式范文
2015/03/20 职场文书
2016高考感言
2015/08/01 职场文书
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP