使用使用WebUploader实现分片断点上传文件功能(二)实现分片断点上传文件功能(二)
主要为大家详细介绍了使用WebUploader实现分片断点上传文件功能,具有一定的参考价值,感兴趣的小伙伴
们可以参考一下
写在前面:写在前面:
这几天,有去研究一下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);
%>
<html>
<head>
<title>WebUploader文件分片上传简单示例</title>
<%--引入css样式--%>
<link href="${baseURL}/webuploader0.1.5/webuploader.css" rel="external nofollow" rel="stylesheet" type="text/css"/>
<script src="${baseURL}/ligerui2/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
<%--引入文件上传插件--%>
<script type="text/javascript" src="${baseURL}/webuploader0.1.5/webuploader.min.js"></script>
<script type="text/javascript">
$(function(){
/*
对于uploader的创建,最好等dom元素也就是下面的div创建好之后再创建,因为里面有用到选择文件按钮,
不然会创建报错,这是很容易忽视的地方,故这里放到$(function(){}来进行创建*/
var uploader = WebUploader.create({
// swf文件路径
swf: '${baseURL}/webuploader0.1.5/Uploader.swf',
// 文件接收服务端地址。
server: '${baseURL}/uploadFile2',
// [默认值:'file'] 设置文件上传域的name。
fileVal:'upload',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick:
{
multiple: false,
id: '#filePicker'