参考的文章
参考的文章http://c7.gg/cd5XT
因为从网上看到的总是和自己项目开发有些许差别,所以也是在调试了很久之后,发现适合自己项目的代码,现在把过程记录下来,以便以后查阅.
注意:
1,webuploader上传组件会和jquery自带的上传组件冲突,所以不要使用<form>标签中添加上传文件的属性;
enctype="multipart/form-data"
2.并且屏蔽ApplicationContext-mvc.xml里面的拦截配置!
-
<!-- 上传拦截,如最大上传值及最小上传值 -->
-
<!--新增加的webuploader上传组件,必须要屏蔽这里的拦截机制
-
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" >
-
<property name="maxUploadSize">
-
<value>1073741824</value>
-
</property>
-
<property name="maxInMemorySize">
-
<value>1073741824</value>
-
</property>
-
<property name="defaultEncoding">
-
<value>utf-8</value>
-
</property>
-
</bean>
-
-->
下面正式开始前后台代码开发:
1.在页面jsp文件中,调用webuploader组件的公共文件
<link rel="stylesheet" href="static/css/webuploader.css" />
-
<script type="text/javascript" src="static/js/webuploader.js"></script>
-
<script type="text/javascript" src="static/js/webuploader.min.js"></script>
-
<script type="text/javascript" src="static/js/upload3.js"></script>
页面上的控件代码:
-
<div id="uploader">
-
<!--用来存放文件信息-->
-
<div id="thelist"></div>
-
<div>
-
<div id="attach"></div>
-
<!-- <input type="button" value="上传" id="upload"/> -->
-
</div>
-
</div>
因为我用的是自动上传,所以注释了上传按钮,upload3.js里也注释了相对的上传按钮的点击方法.
2.真正的上传组件代码是upload3.js,里面介绍了webuploader的初始化,分片,各种参数,具体可以参考官网上的API
-
/*********************************WebUpload 单文件上传 begin*****************************************/
-
$(function(){
-
var $list = $("#thelist");
-
var uploader ;// 实例化
-
uploader = WebUploader.create({
-
auto:true, //是否自动上传
-
pick: {
-
id: '#attach',
-
name:"multiFile", //这个地方 name 没什么用,和fileVal 配合使用。
-
label: '点击选择文件,会自动上传',
-
multiple:false //默认为true,true表示可以多选文件,HTML5的属性
-
},
-
swf: '../Uploader.swf', //在这里必需要引入swf文件,webuploader初始化要用
-
fileVal:'multiFile', //提交到到后台,是要用"multiFile"这个名称属性来取文件的
-
server: "myPractice/webUploader.do",
-
duplicate:true,//是否可重复选择同一文件
-
resize: false,
-
chunked: true, //分片处理
-
chunkSize: 20 * 1024 * 1024, //每片20M
-
chunkRetry:2,//如果失败,则不重试
-
threads:1,//上传并发数。允许同时最大上传进程数。
-
fileNumLimit:1,//上传的文件总数
-
// 禁掉全局的拖拽功能。
-
disableGlobalDnd: true
-
});
-
// 当有文件添加进来的时候
-
uploader.on( "fileQueued", function( file ) {
-
console.log("fileQueued:");
-
$list.append( "<div id='"+ file.id + "' class='item'>" +
-
"<h4 class='info'>" + file.name + "</h4>" +
-
"<p class='state'>正在上传...</p>" +
-
"</div>" );
-
});
-
//当所有文件上传结束时触发
-
uploader.on("uploadFinished",function(){
-
console.log("uploadFinished:");
-
})
-
//当文件上传成功时触发。
-
uploader.on( "uploadSuccess", function( file ,response) {
-
// alert(file.name);
-
$( "#"+file.id ).find("p.state").text("已上传");
-
});
-
uploader.on( "uploadError", function( file ) {
-
$( "#"+file.id ).find("p.state").text("上传出错");
-
uploader.cancelFile(file);
-
uploader.removeFile(file,true);
-
uploader.reset();
-
});
-
//如果是手动上传,用下面的事件,并启用jsp页面上的上传按钮
-
// $("#upload").on("click", function() {
-
// uploader.upload();
-
// })
-
});
-
/*********************************WebUpload 单文件上传 end*******************************************/
3.前台完毕之后,需要找到后台java代码,实现上传到服务器的功能,webuploader组件中server属性就是指向服务端代码:
-
@Controller
-
@RequestMapping(value="/myPractice")//这里就是表明上传组件怎么通过server属性找到后端代码的,不要太在意细节
-
public class MyPracticeController extends BaseController {
-
@RequestMapping(method = {RequestMethod.POST}, value = {"/webUploader"})
-
@ResponseBody
-
public void webUploader(HttpServletRequest request, HttpServletResponse response) throws Exception {
-
try {
-
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
-
if (isMultipart) {
-
FileItemFactory factory = new DiskFileItemFactory();
-
ServletFileUpload upload = new ServletFileUpload(factory);
-
// 得到所有的表单域,它们目前都被当作FileItem
-
List<FileItem> fileItems = upload.parseRequest(request);
-
String id = "";
-
String fileName = "";
-
// 如果大于1说明是分片处理
-
int chunks = 1;
-
int chunk = 0;
-
FileItem tempFileItem = null;
-
for (FileItem fileItem : fileItems) {
-
if (fileItem.getFieldName().equals("id")) {
-
id = fileItem.getString();
-
} else if (fileItem.getFieldName().equals("name")) {
-
fileName = new String(fileItem.getString().getBytes("ISO-8859-1"), "UTF-8");
-
} else if (fileItem.getFieldName().equals("chunks")) {
-
chunks = NumberUtils.toInt(fileItem.getString());
-
} else if (fileItem.getFieldName().equals("chunk")) {
-
chunk = NumberUtils.toInt(fileItem.getString());
-
} else if (fileItem.getFieldName().equals("multiFile")) {
-
tempFileItem = fileItem;
-
}
-
}
-
//session中的参数设置获取是我自己的原因,文件名你们可以直接使用fileName,这个是原来的文件名
-
String fileSysName = this.getRequest().getSession().getAttribute("fileSysName").toString();
-
String realname = fileSysName+fileName.substring(fileName.lastIndexOf("."));//转化后的文件名
-
this.getRequest().getSession().setAttribute("realname",realname);
-
String filePath = Const.VIDEOPATHFILE + "sound/";//文件上传路径
-
// 临时目录用来存放所有分片文件
-
String tempFileDir = filePath + id;
-
File parentFileDir = new File(tempFileDir);
-
if (!parentFileDir.exists()) {
-
parentFileDir.mkdirs();
-
}
-
// 分片处理时,前台会多次调用上传接口,每次都会上传文件的一部分到后台
-
File tempPartFile = new File(parentFileDir, realname + "_" + chunk + ".part");
-
FileUtils.copyInputStreamToFile(tempFileItem.getInputStream(), tempPartFile);
-
// 是否全部上传完成
-
// 所有分片都存在才说明整个文件上传完成
-
boolean uploadDone = true;
-
for (int i = 0; i < chunks; i++) {
-
File partFile = new File(parentFileDir, realname + "_" + i + ".part");
-
if (!partFile.exists()) {
-
uploadDone = false;
-
}
-
}
-
// 所有分片文件都上传完成
-
// 将所有分片文件合并到一个文件中
-
if (uploadDone) {
-
// 得到 destTempFile 就是最终的文件
-
File destTempFile = new File(filePath, realname);
-
for (int i = 0; i < chunks; i++) {
-
File partFile = new File(parentFileDir, realname + "_" + i + ".part");
-
FileOutputStream destTempfos = new FileOutputStream(destTempFile, true);
-
//遍历"所有分片文件"到"最终文件"中
-
FileUtils.copyFile(partFile, destTempfos);
-
destTempfos.close();
-
}
-
// 删除临时目录中的分片文件
-
FileUtils.deleteDirectory(parentFileDir);
-
} else {
-
// 临时文件创建失败
-
if (chunk == chunks -1) {
-
FileUtils.deleteDirectory(parentFileDir);
-
}
-
}
-
}
-
} catch (Exception e) {
-
logger.error(e.getMessage(), e);
-
}
-
}
到这里基本完了,webuploader前后台设计的代码就这些,
Uploader.swf
webuploader.min.js
webuploader.js
webuploader.css
因为从网上看到的总是和自己项目开发有些许差别,所以也是在调试了很久之后,发现适合自己项目的代码,现在把过程记录下来,以便以后查阅.
注意:
1,webuploader上传组件会和jquery自带的上传组件冲突,所以不要使用<form>标签中添加上传文件的属性;
enctype="multipart/form-data"
2.并且屏蔽ApplicationContext-mvc.xml里面的拦截配置!
-
<!-- 上传拦截,如最大上传值及最小上传值 -->
-
<!--新增加的webuploader上传组件,必须要屏蔽这里的拦截机制
-
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" >
-
<property name="maxUploadSize">
-
<value>1073741824</value>
-
</property>
-
<property name="maxInMemorySize">
-
<value>1073741824</value>
-
</property>
-
<property name="defaultEncoding">
-
<value>utf-8</value>
-
</property>
-
</bean>
-
-->
下面正式开始前后台代码开发:
1.在页面jsp文件中,调用webuploader组件的公共文件
<link rel="stylesheet" href="static/css/webuploader.css" />
-
<script type="text/javascript" src="static/js/webuploader.js"></script>
-
<script type="text/javascript" src="static/js/webuploader.min.js"></script>
-
<script type="text/javascript" src="static/js/upload3.js"></script>
页面上的控件代码:
-
<div id="uploader">
-
<!--用来存放文件信息-->
-
<div id="thelist"></div>
-
<div>
-
<div id="attach"></div>
-
<!-- <input type="button" value="上传" id="upload"/> -->
-
</div>
-
</div>
因为我用的是自动上传,所以注释了上传按钮,upload3.js里也注释了相对的上传按钮的点击方法.
2.真正的上传组件代码是upload3.js,里面介绍了webuploader的初始化,分片,各种参数,具体可以参考官网上的API
-
/*********************************WebUpload 单文件上传 begin*****************************************/
-
$(function(){
-
var $list = $("#thelist");
-
var uploader ;// 实例化
-
uploader = WebUploader.create({
-
auto:true, //是否自动上传
-
pick: {
-
id: '#attach',
-
name:"multiFile", //这个地方 name 没什么用,和fileVal 配合使用。
-
label: '点击选择文件,会自动上传',
-
multiple:false //默认为true,true表示可以多选文件,HTML5的属性
-
},
-
swf: '../Uploader.swf', //在这里必需要引入swf文件,webuploader初始化要用
-
fileVal:'multiFile', //提交到到后台,是要用"multiFile"这个名称属性来取文件的
-
server: "myPractice/webUploader.do",
-
duplicate:true,//是否可重复选择同一文件
-
resize: false,
-
chunked: true, //分片处理
-
chunkSize: 20 * 1024 * 1024, //每片20M
-
chunkRetry:2,//如果失败,则不重试
-
threads:1,//上传并发数。允许同时最大上传进程数。
-
fileNumLimit:1,//上传的文件总数
-
// 禁掉全局的拖拽功能。
-
disableGlobalDnd: true
-
});
-
// 当有文件添加进来的时候
-
uploader.on( "fileQueued", function( file ) {
-
console.log("fileQueued:");
-
$list.append( "<div id='"+ file.id + "' class='item'>" +
-
"<h4 class='info'>" + file.name + "</h4>" +
-
"<p class='state'>正在上传...</p>" +
-
"</div>" );
-
});
-
//当所有文件上传结束时触发
-
uploader.on("uploadFinished",function(){
-
console.log("uploadFinished:");
-
})
-
//当文件上传成功时触发。
-
uploader.on( "uploadSuccess", function( file ,response) {
-
// alert(file.name);
-
$( "#"+file.id ).find("p.state").text("已上传");
-
});
-
uploader.on( "uploadError", function( file ) {
-
$( "#"+file.id ).find("p.state").text("上传出错");
-
uploader.cancelFile(file);
-
uploader.removeFile(file,true);
-
uploader.reset();
-
});
-
//如果是手动上传,用下面的事件,并启用jsp页面上的上传按钮
-
// $("#upload").on("click", function() {
-
// uploader.upload();
-
// })
-
});
-
/*********************************WebUpload 单文件上传 end*******************************************/
3.前台完毕之后,需要找到后台java代码,实现上传到服务器的功能,webuploader组件中server属性就是指向服务端代码:
-
@Controller
-
@RequestMapping(value="/myPractice")//这里就是表明上传组件怎么通过server属性找到后端代码的,不要太在意细节
-
public class MyPracticeController extends BaseController {
-
@RequestMapping(method = {RequestMethod.POST}, value = {"/webUploader"})
-
@ResponseBody
-
public void webUploader(HttpServletRequest request, HttpServletResponse response) throws Exception {
-
try {
-
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
-
if (isMultipart) {
-
FileItemFactory factory = new DiskFileItemFactory();
-
ServletFileUpload upload = new ServletFileUpload(factory);
-
// 得到所有的表单域,它们目前都被当作FileItem
-
List<FileItem> fileItems = upload.parseRequest(request);
-
String id = "";
-
String fileName = "";
-
// 如果大于1说明是分片处理
-
int chunks = 1;
-
int chunk = 0;
-
FileItem tempFileItem = null;
-
for (FileItem fileItem : fileItems) {
-
if (fileItem.getFieldName().equals("id")) {
-
id = fileItem.getString();
-
} else if (fileItem.getFieldName().equals("name")) {
-
fileName = new String(fileItem.getString().getBytes("ISO-8859-1"), "UTF-8");
-
} else if (fileItem.getFieldName().equals("chunks")) {
-
chunks = NumberUtils.toInt(fileItem.getString());
-
} else if (fileItem.getFieldName().equals("chunk")) {
-
chunk = NumberUtils.toInt(fileItem.getString());
-
} else if (fileItem.getFieldName().equals("multiFile")) {
-
tempFileItem = fileItem;
-
}
-
}
-
//session中的参数设置获取是我自己的原因,文件名你们可以直接使用fileName,这个是原来的文件名
-
String fileSysName = this.getRequest().getSession().getAttribute("fileSysName").toString();
-
String realname = fileSysName+fileName.substring(fileName.lastIndexOf("."));//转化后的文件名
-
this.getRequest().getSession().setAttribute("realname",realname);
-
String filePath = Const.VIDEOPATHFILE + "sound/";//文件上传路径
-
// 临时目录用来存放所有分片文件
-
String tempFileDir = filePath + id;
-
File parentFileDir = new File(tempFileDir);
-
if (!parentFileDir.exists()) {
-
parentFileDir.mkdirs();
-
}
-
// 分片处理时,前台会多次调用上传接口,每次都会上传文件的一部分到后台
-
File tempPartFile = new File(parentFileDir, realname + "_" + chunk + ".part");
-
FileUtils.copyInputStreamToFile(tempFileItem.getInputStream(), tempPartFile);
-
// 是否全部上传完成
-
// 所有分片都存在才说明整个文件上传完成
-
boolean uploadDone = true;
-
for (int i = 0; i < chunks; i++) {
-
File partFile = new File(parentFileDir, realname + "_" + i + ".part");
-
if (!partFile.exists()) {
-
uploadDone = false;
-
}
-
}
-
// 所有分片文件都上传完成
-
// 将所有分片文件合并到一个文件中
-
if (uploadDone) {
-
// 得到 destTempFile 就是最终的文件
-
File destTempFile = new File(filePath, realname);
-
for (int i = 0; i < chunks; i++) {
-
File partFile = new File(parentFileDir, realname + "_" + i + ".part");
-
FileOutputStream destTempfos = new FileOutputStream(destTempFile, true);
-
//遍历"所有分片文件"到"最终文件"中
-
FileUtils.copyFile(partFile, destTempfos);
-
destTempfos.close();
-
}
-
// 删除临时目录中的分片文件
-
FileUtils.deleteDirectory(parentFileDir);
-
} else {
-
// 临时文件创建失败
-
if (chunk == chunks -1) {
-
FileUtils.deleteDirectory(parentFileDir);
-
}
-
}
-
}
-
} catch (Exception e) {
-
logger.error(e.getMessage(), e);
-
}
-
}
到这里基本完了,webuploader前后台设计的代码就这些,
Uploader.swf
webuploader.min.js
webuploader.js
webuploader.css
这4个公共文件从官网可以下载,都一样.