写在前面:
文件上传方式很多的,对于大文件的上传,在本次项目中也有涉及,主要是用了分片断点上传大文件。所以就去了解了一下WebUploader,先从简单的上传文件开始吧。
在代码中写注释,这样看的比较好点,那就直接上代码来看了解实现的过程吧。
前台jsp页面:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
<%@ 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}/uploadFile',
// [默认值:'file'] 设置文件上传域的name。
fileVal:'upload',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick:
{
multiple: false,
id: '#filePicker'
},
// 上传并发数。允许同时最大上传进程数[默认值:3] 即上传文件数
threads: 1,
// 自动上传修改为手动上传
//auto: true,
//是否要分片处理大文件上传。
//chunked: true,
// 如果要分片,分多大一片? 默认大小为5M.
//chunkSize: 5 * 1024 * 1024,
// 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
//resize: false
});
//当有文件添加进来的时候
uploader.on('fileQueued', function (file) {
//具体逻辑根据项目需求来写 这里只是简单的举个例子写下
$one = $("< div >"+file.name+"</ div >");
$("#fileList").append($one);
});
// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function (file, percentage) {
// 具体逻辑...
});
// 文件上传成功处理。
uploader.on('uploadSuccess', function (file, response) {
// 具体逻辑...
console.log('upload success...\n');
});
// 文件上传失败处理。
uploader.on('uploadError', function (file) {
// 具体逻辑...
});
// 上传传完毕,不管成功失败都会调用该事件,主要用于关闭进度条
uploader.on('uploadComplete', function (file) {
// 具体逻辑...
});
//点击上传按钮触发事件
$("#btnClick").click(function(){
uploader.upload();
});
});
</ script >
</ head >
< body style = "padding:10px" >
< div id = "layout1" >
< div id = "uploader-demo" >
<%--用来装 显示上传文件名称的div--%>
< div id = "fileList" class = "uploader-list" ></ div >
< div id = "filePicker" >选择文件</ div >
< button id = "btnClick" >开始上传</ button >
</ div >
</ div >
</ body >
</ html >
|
后台action:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
/**
* Description:com.ims.action
* Author: Eleven
* Date: 2017/12/26 10:50
*/
@Controller ( "FileAction" )
public class FileAction extends BaseAction{
//记得提供对应的get set方法
//上传文件对象(和表单type=file的name值一致,在jsp页面我们指定了fileVal:'upload',)
private File upload;
//文件名
private String uploadFileName;
//上传类型
private String uploadContentType;
public void uploadFile() throws Exception{
String str = "D:/upload33/" ; //文件保存路径
System.out.println( "文件路径====" +uploadFileName);
String realPath = str + uploadFileName;
File tmp = new File(realPath);
FileUtils.copyFile(upload, tmp);
System.out.println( "上传文件" +uploadFileName+ ",大小:" +(upload.length()/ 1024 / 1024 )+ "M" );
}
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文件的配置:
1
2
|
< action name = "uploadFile" class = "FileAction" method = "uploadFile" >
</ action >
|
现在可以运行了,这个只是用WebUploader来实现的一个最基本的文件上传了。在jsp页面跟后台action中,都谈不上有什么逻辑,也不是很完整。因为项目不同,业务流程也不同,故可以先入门,后续根据自己的需求,进行添加的。
运行截图:
之后继续整理实现分片断点上传的文章。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:http://www.cnblogs.com/eleven258/p/8119658.html