上传文件进阶

1. FormData来进行文件上传

  参考文档 ： https://www.jianshu.com/p/e984c3619019

    FormData 就是2008年 2 月 XMLHttpRequest Level 2 新增的一个对象。

    利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件。

实现效果：多文件上传，点击发布统一保存在数据库中。

 

html:    
<p>直播资料:</p>
<input type="file" id="uploadFileId" style="display: none">
  <ul class="remeans clearfix">
      <li class="remeansUp dis">
        <img src="/liveManager/img/button_add.png" alt="" class="addIcon">
          <p>上传</p>
       </li>
  </ul>
    

js:

    //上传文件btn
    $(".remeansUp").click(function () {
       $("#uploadFileId").click();
    })

    var fileDatas = [];//文件集合
    //上传后的监听事件 获取到上传文件名称
    $("input[type=file]").change(function(e){
        var fileName = getFileName( $("#uploadFileId").val());
        var suffix = fileName.substr(fileName.lastIndexOf(".")+1);
        var fileHtml = "<li>"+fileName+suffix+"</li>";
        $(".remeansUp").before(fileHtml);

        fileDatas.push($("#uploadFileId")[0].files[0]);
    })

    //jquery获取input file文件名
    function getFileName(o){
        var pos=o.lastIndexOf("\\");
        return o.substring(pos+1);
    }


    //发布直播课
    $(".relesaSure").click(function () {
            var formData = new FormData();//这里需要实例化一个FormData来进行文件上传
            for(var i = 0;i<fileDatas.length;i++){
                formData.append("file"+i,fileDatas[i]);
            }
            formData.append("name","张三");

            $.ajax({
                url: "/live/addLiveClass",
                type: "POST",
                traditional:true, //实现上传数组
                processData: false, // 告诉jQuery不要去处理发送的数据
                contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                data: formData,
                success: function (data) {
                },
                error: function () {
                }
            });

    })

springmvc后台：

    @RequestMapping("/addLiveClass")
	@ResponseBody
	public ResponseMsg addLiveClass(HttpServletRequest request, String name){

        MultipartHttpServletRequest multipartRequest = WebUtils.getNativeRequest(request, 
        MultipartHttpServletRequest.class);
        //获取一个文件 指定文件名称
        //MultipartFile file= null;
        //file = multipartRequest.getFile("file");
        //获取文件集合
        Map<String, MultipartFile> multipartFileMap = multipartRequest.getFileMap();
        Collection<MultipartFile> files = multipartFileMap.values();

        //这里获取到文件流集合上传到对应的路径中
     
    }