Springboot 文件异步上传(显示进度条)

**

java web 文件异步上传(显示进度条)

**

---

前端页面

html

 	<script language="javascript" src="jquery-3.4.1.js"></script>
	<!-- 弹框插件 -->
    <script language="javascript" src="toastr.min.js"></script>
    <link href="toastr.min.css" rel="stylesheet"/>


<input type="file" multiple="multiple" name="fun_file" id="file_add"/>

<!--文件上传进度条-->
<div class='container' style="display: none; margin:0px 25%">
	<!--99.99是前台到后台的完成度,后台保存需要额外时间-->
    <span id="progress" max="99.99"></span>
</div>

css

.container{
    display: none;
    width: 850px;
    height: 20px;
    background-color: #CCFFFF;
    margin: 20px;

}
#progress{
    height: 20px;
    background-color: orange;
    display: inline-block;
    text-align: center;
}

#main_part{
    padding: 30px;
    margin: 20px;
    text-align: center;
}

.media-middle{
    display:table;
    margin: 20px;
}
.media-middle #file_table{
    text-align:center;
}

.header{
    margin: 20px;
}

JS (以下所有js从上往下不间断,分开只是为了方便看)

  //初始化进度条状态
$('#progressBox').css("display","block");
$('#progressBar').css('width','0%');
$('#progressText').text('0%');

//创建格式化数据
var formData = new FormData();
formData.append("后台参数名", $("#file_add")[0].files[0]);
//formData.append("后台参数名", Value);
$.ajax({
        url: "后台方法地址",
        type: "POST",
        dataType: "json",
        data: formData,
        async : true,
        cache : false,
        contentType: false,
        processData: false,

        //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
		xhr: function(){ 
            $(".container").css("display","block");
            myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ //检查upload属性是否存在
                //绑定progress事件的回调函数
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
            }
            return myXhr; //xhr对象返回给jQuery使用
        },

		success: function (data) {
            toastr.success('上传成功'); // 提示上传成功插件-可以更换与不用
            // 这句是上传成功后将进度条隐藏,重置进度条，看自己需求是否需要
            $('.container').css("display","none");
            $('#progress').text('0%');
           
            setTimeout(
                function(){
                    toastr.clear();
                }, 1000);
            //页面上传成功后要做的事
           	//ajaxSuccess(data);
           /*	如:function ajaxSuccess(data){
				$("#ID").empty();
				 $("#file_table").append("标签");
			}
			*/
        },

        error : function(data) {
            toastr.error('上传失败');
            $('#progressBox').css("display","none")
            // 这句是上传失败后将进度条隐藏，看自己需求是否需要
            $('.container').css("display","none");
            // 重置进度条
            $('#progress').text('0%');
            setTimeout(
                function(){
                    toastr.clear();
                }, 1000);
        }
    });

后台

    @RequestMapping(value = "URL",method = RequestMethod.POST)
    public String screenshot(@RequestParam("funFile") MultipartFile file,){
        InputStream inputStream = file.getInputStream(); //file获取inputStream对象
       	String fileName=File.getOriginalFilename();	//获取文件名(有后缀)
    	boolean bool=fileIO.addFileIO(path,inputStream,fileName);
    	if(bool){
    		//sql
		}
        return "URL";
    }



  /**
     * @param path	文件路径
     * @param fileName	文件名
     * @param file	文件对象
     * @return
     */
public  boolean addFileIO(String path,InputStream file, String fileName) {
        boolean result=false;
        long startTime = System.currentTimeMillis();
        //创建输入输出对象
        BufferedInputStream in = null;
        BufferedOutputStream out = null;
        try {
        	//文件保存地址+文件名(有后缀)
        	String FilePath = path+"\\"+fileName;
        	//把文件对象放入输入流
            in = new BufferedInputStream(file);
            //创建文件输出流,把保存地址放入
            out = new BufferedOutputStream(new FileOutputStream(FilePath);
            //创建读取行数对象;
            int readContent;
            //创建byte缓冲区
            byte[] buf = new byte[1024];
            //循环向输出流写入
            while((readContent=in.read(buf))!=-1) {
                out.write(buf);
                out.flush();
            }
            result= true;
        } catch (FileNotFoundException e) {
            return result;
        } catch (IOException e) {
            return result;
        }finally {
        	//输入输出流必须关闭!!!
            try {
                if(in!=null)in.close();
                if(out!=null)out.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        long endTime = System.currentTimeMillis();
        long spendTime = endTime - startTime;
        System.out.println("BufferedInputStream和BufferedOutputStream基础上添加缓存数组后复制用时："+ spendTime + "毫秒");
        return result;
    }

Springboot上传大文件:
application.yml中设置

spring:
  servlet:
    multipart:
      max-file-size: xxxxMB
      max-request-size: xxxxMB

结束…

其实这样就好了:

    public String uploadingFile(MultipartFile[] multipartFile) throws IOException {
        if(multipartFile.length>0){
            for (MultipartFile file : multipartFile) {
                String name = file.getOriginalFilename();
                file.transferTo(new File("D:\\Img\\"+name));
            }
        }
        return "ok";
    }