扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
写在前面:
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册、虚拟主机、营销软件、网站建设、新疆网站维护、网站推广。
这几天,有去研究一下WebUploader上传文件,前面的博客有记录下使用WebUploader简单上传文件的例子,今天就把分片断点上传的例子也记录下吧,在博客园中,也查看了一些资料,基本上后台处理数据都是用的Servlet,或者是SpringMVC,由于最近的项目一直都是Struts2,所以这里就用Struts2中的action来对数据进行处理,达到分片上传文件的效果。
1.什么是分片上传?
顾名思义,就是把文件分成一片片,即让一个文件,分割成好几个小文件,然后再上传。这样做的好处是便于上传大文件。
2.分片上传大致思路:
1.前台页面,选择文件,点击按钮进行上传。
2.WebUploader将上传的文件,分割成指定的个数,挨个发送到服务端后台。
3.服务器接收分割后的小文件,并存储到临时文件夹下
4.服务器接收分割后的小文件完毕后,前台页面执行上传成功函数。
5.在上传成功函数中,发送请求到服务器,请求合并小文件为一个整体的文件。
6.服务器后台对文件进行合并操作,合并完成后删除存储小文件的临时文件。
了解了分片上传的大致过程,下面直接上demo吧。
前台页面:
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <% String scheme = request.getScheme(); String serverName = request.getServerName(); String contextPath = request.getContextPath(); int port = request.getServerPort(); //网站的访问跟路径 String baseURL = scheme + "://" + serverName + ":" + port + contextPath; request.setAttribute("baseURL", baseURL); %>WebUploader文件分片上传简单示例 <%--引入css样式--%> <%--引入文件上传插件--%>选择文件
后台action:
/** * Description:com.ims.action * Author: Eleven * Date: 2017/12/26 10:50 */ @Controller("FileAction") public class FileAction { /*用于接收分割请求的每个小文件的相关参数*/ //记得提供对应的get set方法 //上传文件对象(和表单type=file的name值一致) private File upload; //文件名 private String uploadFileName; //上传类型 private String uploadContentType; /** * 以下变量都是public,参数太多,不想设为private再去写get,set方法了, * 就偷个懒直接用了public了 */ //文件分片序号 public String chunk; public String guid;//合并与分割都有用到 //用于接收发送合并请求的相关参数 public String fileName; //文件名 public String chunks; //分割数量 //当进行分片上传文件的时候,每上传一个小文件就会调用这个方法,这个就跟普通的保存文件没啥区别的 public void uploadFile2() throws Exception{ String str = "D:/upload44/divide/"; //文件保存路径 //保存每个小文件的路径 String realPath = str + guid +"/" + chunk; File tmp =new File(realPath); FileUtils.copyFile(upload, tmp); System.out.println("上传文件"+uploadFileName+",第几块:"+chunk+",大小:"+(upload.length()/1024/1024)+"M"); } //文件合并 public void mergeFile() throws Exception{ String path = "D:/upload44/merge/" ; //创建 合并文件夹 new File(path).mkdir(); //创建 合并后的文件 File newFile = new File(path + fileName); if(!newFile.exists()){ newFile.createNewFile(); } FileOutputStream outputStream = new FileOutputStream(newFile, true);//文件追加写入 byte[] byt = new byte[10 * 1024 * 1024]; int len; FileInputStream temp = null;//分片文件 for (int i = 0; i < Integer.parseInt(chunks); i++) { //"D:/upload44/divide/" + guid + "/" + i 为保存分割后的小文件的路径 temp = new FileInputStream(new File("D:/upload44/divide/" + guid + "/" + i)); while ((len = temp.read(byt)) != -1) { System.out.println(len); outputStream.write(byt, 0, len); } temp.close(); } //当所有追加写入都写完 才可以关闭流 outputStream.close(); //删除分片文件 String path3 = "D:/upload44/divide/" + guid; FileUtils.deleteDirectory(new File(path3));//删除目录下所有的内容 System.out.println("success!guid=" + guid + ";chunks=" + chunks + ";fileName=" + fileName); } public File getUpload() { return upload; } public void setUpload(File upload) { this.upload = upload; } public String getUploadFileName() { return uploadFileName; } public void setUploadFileName(String uploadFileName) { this.uploadFileName = uploadFileName; } public String getUploadContentType() { return uploadContentType; } public void setUploadContentType(String uploadContentType) { this.uploadContentType = uploadContentType; } }
struts.xml配置:
好啦,到这里,一个简单的文件分片断点上传就完成了。
对了补充说明下,后台只是接收了一些简单的参数而已,而从前台WebUploader传递过来的参数当然不止上面那几个了,所以,可以学会用F12调试模式,进行查看发送的请求,以及相关的请求参数,这里就不多说了
运行截图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流