问题：
B/S通常都会涉及到文件的上传，普通文件上传使用文件框，后台接收文件即可
我遇到的问题是要开发一个大文件上传的功能，那就肯定要支持文件的分片
分析：
1.参考网上的资料后，通常的多文件和大文件上传会用到三种框架
多文件上传的插件常用的有：
1、jquery uploadify 下载【http://www.uploadify.com/download/】
2、jquery file upload 下载【https://github.com/blueimp/jQuery-File-Upload/tags】
3、webuploader 下载 【http://fex.baidu.com/webuploader/download.html】
2.最后我选的是百度开发的 【webuploader】，网上比较推崇
解决：
1.新建一个测试页面，引入相关的样式表css，js文件
注意，要首先引入jquery的js文件，我的页面是嵌套的，首页已经引入
引入文件清单：
@ bootstrap的css,js文件
@ 在【http://fex.baidu.com/webuploader/】这里下载webuploader的压缩包，我这只是引入了
【webuploader.css】和【webuploader.js】
@ 引入自己的业务js文件
<!--引入CSS--> <link rel="stylesheet" type="text/css" href="static/html/bigFileUpload/assets/bootstrap-3.3.7-dist/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="static/html/bigFileUpload/assets/webuploader.css"> <!--官网例子--> <!--<div id="uploader" class="wu-example">--> <!--<!–用来存放文件信息–>--> <!--<div id="thelist" class="uploader-list"></div>--> <!--<div class="btns">--> <!--<div id="picker">选择文件</div>--> <!--<button id="ctlBtn" class="btn btn-default">开始上传</button>--> <!--</div>--> <!--</div>--> <!--单文件--> <div id="uploader" class="wu-example"> <!--用来存放文件信息--> <div id="thelist" class="uploader-list"></div> <div class="btns"> <div id="attach"></div> <button id="upload" class="btn btn-default">开始上传</button> </div> </div> <!--多文件--> <!--<div id="uploader1" class="wu-example">--> <!--<!–用来存放文件信息–>--> <!--<div id="thelist1" class="uploader-list"></div>--> <!--<div class="btns">--> <!--<div id="multi"></div>--> <!--<input type="button" value="上传" id="multiUpload"/>--> <!--</div>--> <!--</div>--> <!--引入JS--> <script type="text/javascript" src="static/html/bigFileUpload/assets/webuploader.js"></script> <script type="text/javascript" src="static/html/bigFileUpload/assets/bootstrap-3.3.7-dist/js/bootstrap.js"></script> <script type="text/javascript" src="static/html/bigFileUpload/upload.js"></script>
2.编写业务js文件
$(function(){ var $list = $("#thelist"); var uploader;
// 初始化uploader uploader = WebUploader.create({ auto:false, //不自动提交，需要点击 pick: { id: ‘#attach‘, label: ‘选择文件‘, }, server: ‘test/save‘, //后台接收服务 resize: false, formData: {"Authorization": localStorage.token}, //额外参数传递，可以没有 chunked: true, //分片 chunkSize: 10 * 1024 * 1024, //分片大小指定 threads:1, //线程数量 disableGlobalDnd: true //禁用拖拽 }); //添加文件页面提示 uploader.on( "fileQueued", function( file ) { $list.html( "<div id=‘"+ file.id + "‘ class=‘item‘>" + "<h4 class=‘info‘>" + file.name + "</h4>" + "<p class=‘state‘>等待上传...</p>" + "</div>" ); }); //开进度条 uploader.on( ‘uploadProgress‘, function( file, percentage ) { var $li = $( ‘#‘+file.id ), $percent = $li.find(‘.progress .progress-bar‘); if ( !$percent.length ) { $percent = $(‘<div class="progress progress-striped active">‘ + ‘<div class="progress-bar" role="progressbar" style="width: 0%">‘ + ‘</div>‘ + ‘</div>‘).appendTo( $li ).find(‘.progress-bar‘); } $li.find(‘p.state‘).text(‘上传中‘); $percent.css( ‘width‘, percentage * 100 + ‘%‘ ); }); //上传成功 uploader.on( "uploadSuccess", function( file ) { $( "#"+file.id ).find("p.state").text("已上传"); $(‘#‘ + file.id).find(‘.progress‘).fadeOut(); }); //上传失败 uploader.on( "uploadError", function( file ) { $( "#"+file.id ).find("p.state").text("上传出错"); uploader.cancelFile(file); uploader.removeFile(file,true); }); //点击上传 $("#upload").on("click", function() { uploader.upload(); }) });
3.编写后台文件接收文件
package org.triber.portal.upload; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Value; import org.springframework.http.MediaType; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile; import java.io.*; import java.util.HashMap; import java.util.Map; @Slf4j @RestController @RequestMapping(value = "/test", produces = MediaType.APPLICATION_JSON_VALUE) public class UploadController { @Value("${AREA_FILE}") private String AREA_FILE;//excel下载文件名 @Value("${AREA_DIR}") private String AREA_DIR;//excel临时存储文件夹 /** * 上传文件 * @param file * @return * @throws IOException */ @RequestMapping(value = "/save", produces = {"application/json"}) public Map<String,String> importExcel(@RequestParam MultipartFile file) throws IOException { //获取文件名 String originalFilename = file.getOriginalFilename(); //合并文件 RandomAccessFile raFile = null; BufferedInputStream inputStream=null; try{ File dirFile = new File(AREA_DIR, originalFilename); //以读写的方式打开目标文件 raFile = new RandomAccessFile(dirFile, "rw"); raFile.seek(raFile.length()); inputStream = new BufferedInputStream(file.getInputStream()); byte[] buf = new byte[1024]; int length = 0; while ((length = inputStream.read(buf)) != -1) { raFile.write(buf, 0, length); } }catch(Exception e){ throw new IOException(e.getMessage()); }finally{ try { if (inputStream != null) { inputStream.close(); } if (raFile != null) { raFile.close(); } }catch(Exception e){ throw new IOException(e.getMessage()); } }
//以下信息没用。比较扯淡 //初始化返回信息 Map<String, String> map = new HashMap<String, String>(); String result = ""; int res = -1; //返回提示信息 map.put("result", result); return map; } }
总结：
说一下我遇到的问题吧，
网上查了好多资料，看了好多例子，可能例子业务要求高，设置一堆参数，最后发现还是官网靠谱，没有没用的东西，但是你单独拷贝下来会出现无法运行的情况
额，最后拷贝精简代码，到最小可用，大家可以视情况而定
我使用的springBoot,后台在接收文件时为 【MultipartFile】
试了File来接受总是提示我不能接收，后来没办法。只能采用多文件类来接收
我写的这个例子适用于单文件，而且文件比较大的情况
据说IE不能上传4g之上的文件，现在没有这个限制了，无论大小，切割后后台组装即可
后期可能会再加 多文件，重复文件校验，断点续传，块MD5校验 等功能，等功能上来后再为大家更新
