通过页面实现多文件上传，并有进度条控制的例子，步骤参考如下（代码中涉及的几个按钮图片参见附件）
1：页面端实现多文件上传
<%@ page language=
"java"
contentType=
"text/html; charset=UTF-8"
pageEncoding=
"UTF-8"
session=
"false"
%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"<a href="http://www.w3.org/TR/html4/loose.dtd" "="">http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<title>上传</title>
<meta http-equiv=
"content-type"
content=
"text/html; charset=UTF-8"
/>
<script src=
"<%= request.getContextPath() %>/common/nui/nui.js"
type=
"text/javascript"
></script>
<link href=
"<%=request.getContextPath()%>/FuJian/style/YangShi.css"
rel=
"stylesheet"
type=
"text/css"
/>
<%
String Bizid = request.getParameter(
"BizID"
);
String Typeid = request.getParameter(
"typeid"
);
String ID = request.getParameter(
"ID"
);
String Filetitle = request.getParameter(
"Filetitle"
);
%>
</head>
<body>
<form action=
"<%=request.getContextPath()%>/FuJian_CunRu.jsp?BizID=<%=Bizid%>&Typeid=<%=Typeid%>&ID=<%=ID%>&Filetitle=<%=Filetitle%>"
method=
"post"
enctype=
"multipart/form-data"
onsubmit=
"return TiJiao()"
>
<span style=
'color:red;'
>提示：单个文件最大上传为50MB，超出会红色提示，建议压缩后上传！</span>
<div
class
=
"fileInputContainer"
>
<input type=
"file"
id=
"WenJian"
class
=
"fileupload"
name=
"Fdata"
onchange=
"XuanZhong()"
multiple=
"multiple"
/>
<input type=
"button"
value=
""
class
=
"quxiao"
onClick=
"QuXiao()"
/>
<input type=
"submit"
value=
""
class
=
"shangchuan"
/>
</div>
<div id=
"JinDu"
class
=
"progressbar"
>
<div id=
"ZouDong"
class
=
"progressbar-percent"
></div>
<div
class
=
"progressbar-label"
><span id=
"JinduTiao"
style=
'color:red;'
></span></div>
</div>
<div id=
"QWenJian"
>
<table id=
"SuoYouWJ"
bordercolor=
"#AFD1EB"
cellpadding=
'0'
cellspacing=
'0'
align=
'center'
border=
'1px'
width=
'100%'
>
<tbody id=
"tbody"
>
<tr align=
"center"
>
<td width=
"45%"
>文件名</td>
<td width=
"7%"
>类型</td>
<td width=
"38%"
>提示</td>
</tr>
</tbody>
</table>
</div>
</form>
<script type=
"text/javascript"
>
nui.parse();
//加载
$(function(){
$(
"#QWenJian"
).hide();
});
//返回值
var XinXi =
"<%=request.getParameter("
FanHuiZhi
") %>"
;
if
(XinXi !=
"null"
){
document.getElementById(
'ZouDong'
).style.width =
"100%"
;
document.getElementById(
'JinduTiao'
).innerHTML =
"进度100%"
;
nui.alert(XinXi,
"系统提示"
,function(){
CloseWindow();
});
}
else
{
$(
"#JinDu"
).hide();
}
//定义文件大小
var DaXiao =
50
*
1024
*
1024
;
//选中的文件
function XuanZhong(){
//保留Table第一行删除剩下所有
$(
"table tbody tr"
).eq(
0
).nextAll().remove();
$(
"#QWenJian"
).show();
//获取多文件上传的所有文件名
var SuoYouWenJian = document.getElementById(
"WenJian"
).files;
for
(var i=
0
;i<SuoYouWenJian.length;i++){
var WenJianQuanMing = SuoYouWenJian[i].name;
//截取文件名
var WenJianMing = WenJianQuanMing.substring(
0
,WenJianQuanMing.indexOf(
"."
));
//截取文件类型转换成小写
var WenJianLeiXing = WenJianQuanMing.substring(WenJianQuanMing.indexOf(
"."
)).toLowerCase();
//文件大小
var WenJianDaXiao = SuoYouWenJian[i].size;
if
(parseInt(WenJianDaXiao) > parseInt(DaXiao)){
WenJianTiSHi =
"文件过大，建议压缩后再上传！"
;
}
else
if
(parseInt(WenJianDaXiao) ==
0
){
WenJianTiSHi =
"文件内容为空，请核对后再上传！"
;
}
else
if
(WenJianLeiXing ==
".exe"
|| WenJianLeiXing ==
".java"
|| WenJianLeiXing ==
".mp4"
){
WenJianTiSHi =
"此类型格式不支持上传！"
;
}
else
{
WenJianTiSHi =
"文件符合！"
;
}
//把输入的值传到列表里
var MingTxt = document.createTextNode(WenJianMing);
var LeiXingTxt = document.createTextNode(WenJianLeiXing);
var TiShiTxt = document.createTextNode(WenJianTiSHi);
//td是表中的列 tr是表中的行
var WJMing = document.createElement(
"td"
);
var WJLeiXing = document.createElement(
"td"
);
var TiShi = document.createElement(
"td"
);
if
(parseInt(WenJianDaXiao) > parseInt(DaXiao) || parseInt(WenJianDaXiao) ==
0
){
TiShi.style.color =
"#FF0000"
;
}
else
if
(WenJianLeiXing ==
".exe"
|| WenJianLeiXing ==
".java"
|| WenJianLeiXing ==
".mp4"
){
TiShi.style.color =
"#FF0000"
;
}
else
{
TiShi.style.color =
"#00FF00"
;
}
//td的标签体 -->td对象
WJMing.appendChild(MingTxt);
WJLeiXing.appendChild(LeiXingTxt);
TiShi.appendChild(TiShiTxt);
//创建tr对象行
var HangTr = document.createElement(
"tr"
);
//td对象 -->tr对象
HangTr.appendChild(WJMing);
HangTr.appendChild(WJLeiXing);
HangTr.appendChild(TiShi);
//tr对象 --> tbody对象
document.getElementById(
"tbody"
).appendChild(HangTr);
}
}
var DianJi =
0
;
//上传时候验证
function TiJiao(){
if
(DianJi ==
0
){
DianJi =
1
;
var SYWenJian = document.getElementById(
"WenJian"
).files;
if
(SYWenJian.length <
1
){
nui.alert(
"请选择一条文件后，再上传！"
,
"系统提示"
);
return
false
;
}
else
if
(SYWenJian.length >
5
){
nui.alert(
"上传文件最多每次5条信息！"
,
"系统提示"
);
return
false
;
}
else
{
for
(var i=
0
;i<SYWenJian.length;i++){
var FileQuanMing = SYWenJian[i].name;
//截取文件类型转换成小写
var FileLX = FileQuanMing.substring(FileQuanMing.indexOf(
"."
)).toLowerCase();
if
(FileLX ==
".exe"
|| FileLX ==
".java"
|| FileLX ==
".mp4"
){
nui.alert(
"上传的文件中存在类型格式不支持上传，请重新选择后再上传！"
,
"系统提示"
);
return
false
;
}
//文件大小
var WenJianDaXiao = SYWenJian[i].size;
//文件内容为空
var KongDaXiao = SYWenJian[i].size;
if
(parseInt(WenJianDaXiao) > parseInt(DaXiao)){
nui.alert(
"上传的文件中有过大文件，请重新选择后再上传！"
,
"系统提示"
,function(){
return
false
;
});
}
if
(parseInt(KongDaXiao) ==
0
){
nui.alert(
"上传的文件内容是空，请核对后再上传！"
,
"系统提示"
,function(){
return
false
;
});
}
}
$(
"#JinDu"
).show();
JinDuTiaoXX(
1
);
}
}
else
{
nui.loading(
"请勿重复操作，请稍后......"
,
"系统提示"
);
return
false
;
}
}
//进度条
function JinDuTiaoXX(n){
if
(parseInt(n) ==
97
){
return
;
}
t = parseInt(n);
document.getElementById(
'ZouDong'
).style.width = parseInt(t) +
"%"
;
document.getElementById(
'JinduTiao'
).innerHTML=
"进度"
+ parseInt(t) +
"%"
;
setTimeout(
"JinDuTiaoXX(parseInt(t)+1)"
,
800
);
}
//获取子页面信息
function GetData(){
if
(XinXi ==
"上传成功！"
){
return
true
;
}
else
{
return
false
;
}
}
//关闭子窗口，刷新父窗体
function CloseWindow(action){
if
(window.CloseOwnerWindow)
return
window.CloseOwnerWindow(action);
else
window.close();
}
//点击取消按钮
function QuXiao(e){
CloseWindow(
"cancel"
);
}
</script>
</body>
</html>
|
2：文件上传要用到的css
.fileInputContainer{
background:url(../style/youlan.png) no-repeat;
}
.fileupload{
width:350px;
height:27px;
right:
0
;
top:
0
;
opacity:
0
;
filter:alpha(opacity=
0
);
cursor:pointer;
}
.shangchuan{
background:url(../style/shangchuan.png);
width:62px;
height:26px;
border:
0
;
padding:
0
;
float
:right;
margin-right:10px;
}
.quxiao{
background:url(../style/quxiao.png);
width:62px;
height:26px;
border:
0
;
padding:
0
;
float
:right;
margin-right:10px;
}
.yichu{
width:62px;
height:26px;
border:
0
;
padding:
0
;
background:url(../style/yichu.png);
}
.progressbar{
position:relative;
background:#AAAAAA;
width:
98
%;
height:16px;
overflow:hidden;
}
.progressbar-percent{
position:absolute;
height:18px;
background:#00FF00;
left:
0
;top:0px;
overflow:hidden;
z-index:
1
;
}
.progressbar-label{
position:absolute;
left:
0
;
top:
0
;
width:
90
%;
font-size:13px;
color:White;
z-index:
10
;
text-align:center;
height:16px;
line-height:16px;
}
|
3：文件上传服务器端程序
0
<%
@page
import
=
"java.io.File"
%>
<%
@page
import
=
"java.text.SimpleDateFormat"
%>
<%
@page
language=
"java"
contentType=
"text/html;charset=UTF-8"
pageEncoding=
"UTF-8"
import
=
"java.util.*,Test.*"
%>
<%
@page
import
=
"org.apache.commons.fileupload.disk.DiskFileItemFactory"
%>
<%
@page
import
=
"org.apache.commons.fileupload.servlet.ServletFileUpload"
%>
<%
@page
import
=
"org.apache.commons.fileupload.FileItem"
%>
<%
@page
import
=
"java.io.FileInputStream"
%>
<%
@page
import
=
"java.io.ByteArrayOutputStream"
%>
<%
@page
import
=
"com.eos.data.datacontext.DataContextManager"
%>
<%
@page
import
=
"com.eos.data.datacontext.IMUODataContext"
%>
<%
@page
import
=
"com.eos.data.datacontext.IUserObject"
%>
<%
@page
import
=
"com.eos.foundation.data.DataObjectUtil"
%>
<%
@page
import
=
"commonj.sdo.DataObject"
%>
<%
@page
import
=
"com.eos.engine.component.ILogicComponent"
%>
<%
@page
import
=
"com.primeton.ext.engine.component.LogicComponentFactory"
%>
<%
@page
import
=
"java.io.InputStream"
%>
<%
@page
import
=
"java.io.PrintWriter"
%>
<%
System.out.println(
"我进来了....."
);
//定义上传路径
String BenLuJing =
"FuJianCaiLiao\\"
+
"Upload\\"
;
boolean
isFileUpload = ServletFileUpload.isMultipartContent(request);
//定义返回值
String FanHuiZhi =
""
;
//如果是文件上传类型
if
(isFileUpload){
//得到文件上传工厂
DiskFileItemFactory GongChang =
new
DiskFileItemFactory();
//处理文件上传核心类
ServletFileUpload fileUpload =
new
ServletFileUpload(GongChang);
//设置文件上传类的编码格式
fileUpload.setHeaderEncoding(
"UTF-8"
);
// 集合数据:FileItem对象 注意:每一个表单域 对应一个 FileItem对象(封装)
List<FileItem> fileItemList = fileUpload.parseRequest(request);
//遍历文件
for
(FileItem item: fileItemList){
//如果这个文本域是文件类型的
if
(!item.isFormField()){
//得到文件名
String FileName = item.getName();
//去除所有空格
String WenJianMing = FileName.replaceAll(
" +"
,
""
);
//检查文件后缀格式 ，并转换为小写
String FileLeiXing = WenJianMing.substring(WenJianMing.lastIndexOf(
"."
)).toLowerCase();
//获取文件大小
long
WenJianSize = item.getSize();
//转换文件大小名称
long
kb =
1024
;
long
mb = kb *
1024
;
long
gb = mb *
1024
;
//文件单位
String FileSize =
""
;
if
(WenJianSize >= gb){
FileSize = String.format(
"%.1fGB"
,(
float
)WenJianSize/gb);
}
else
if
(WenJianSize >= mb) {
float
f = (
float
)WenJianSize/mb;
FileSize = String.format(f >
100
?
"%.0fMB"
:
"%.1fMB"
,f);
}
else
if
(WenJianSize >= kb){
float
f = (
float
)WenJianSize/kb;
FileSize = String.format(f >
100
?
"%.0fKB"
:
"%.1fKB"
,f);
}
else
{
FileSize = String.format(
"%dB"
,WenJianSize);
}
//得到服务器的根路径
String rootPath = request.getRealPath(
"\\"
);
//定义年
SimpleDateFormat Nian =
new
SimpleDateFormat(
"yyyy"
);
//定义年月日
SimpleDateFormat NianYueRi =
new
SimpleDateFormat(
"yyyy-MM-dd"
);
//转换成年份
String NianFen = Nian.format(
new
Date());
//转换成年月日
String NianYR = NianYueRi.format(
new
Date());
//得到文件的路径
String QuanLuJIng = rootPath + BenLuJing + NianFen +
"年\\"
+ NianYR;
//创建文件唯一名称
String UID = UUID.randomUUID().toString();
//截取文件名
String FileMing = WenJianMing.substring(
0
,WenJianMing.indexOf(
"."
));
//拼接一个新的文件名
String XinMing =NianFen +
"_"
+ NianYR +
"_"
+ FileMing +
"_"
+ UID + FileLeiXing;
//路径
File WenJianFile =
new
File(QuanLuJIng);
//如果年文件夹不存在则创建
if
(!WenJianFile.exists() && !WenJianFile.isDirectory()){
//创建文件夹
WenJianFile.mkdirs();
}
//路径
File FileWJ =
new
File(QuanLuJIng +
"\\"
+XinMing);
//得到用户信息
String ShangChuanRen =
""
;
IMUODataContext muo = DataContextManager.current().getMUODataContext();
if
(muo !=
null
) {
IUserObject userobject = muo.getUserObject();
if
(userobject !=
null
) {
ShangChuanRen = userobject.getUserRealName();
}
}
//引用实体
DataObject dataobject = DataObjectUtil.createDataObject(
"com.QiYeDuan.FuJianCaiLiao.FuJian.FujianXx"
);
String Filetitle = request.getParameter(
"Filetitle"
);
//把传过来的filetitle解码
String FileTitle = java.net.URLDecoder.decode(Filetitle,
"UTF-8"
);
dataobject.set(
"bizid"
, request.getParameter(
"Bizid"
));
dataobject.set(
"typeid"
, request.getParameter(
"Typeid"
));
dataobject.set(
"filetypeid"
, request.getParameter(
"ID"
));
dataobject.set(
"filetitle"
, FileTitle);
dataobject.set(
"filesize"
, FileSize);
dataobject.set(
"fileextension"
, FileLeiXing);
dataobject.set(
"url"
, XinMing);
dataobject.set(
"scr"
, ShangChuanRen);
dataobject.set(
"scrq"
,
new
Date());
//调用逻辑构建
String componentName =
"com.QiYeDuan.FuJianCaiLiao.FuJian"
;
String operationName =
"add_FuJianXX"
;
ILogicComponent logicComponent = LogicComponentFactory.create(componentName);
// 逻辑流的输入参数
Object[] params =
new
Object[
1
];
params[
0
] = dataobject;
Object[] result =
null
;
result = logicComponent.invoke(operationName, params);
//存入文件
item.write(FileWJ);
}
else
{
FanHuiZhi =
"要长传的路径出现错误，请重新上传！"
;
}
}
FanHuiZhi =
"上传成功！"
;
}
else
{
FanHuiZhi =
"长传错误！"
;
}
//PrintWriter XinXi = response.getWriter();
//XinXi.write("<script src=\"/default/common/nui/nui.js\" type=\"text/javascript\"></script><script type=\"text/javascript\">nui.parse();$(function(){location.assign(\""+request.getContextPath()+"/FuJian/ShangChuan_Files.jsp?FanHuiZhi="+FanHuiZhi+"\");});</script>");
%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"<a href="http://www.w3.org/TR/html4/loose.dtd" "="">http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<title>图片</title>
<meta http-equiv=
"content-type"
content=
"text/html; charset=UTF-8"
/>
<script src=
"<%= request.getContextPath() %>/common/nui/nui.js"
type=
"text/javascript"
></script>
</head>
<body>
<script type=
"text/javascript"
>
nui.parse();
nui.alert(
"<%=FanHuiZhi %>"
,
"系统提示"
,function(o){
//关闭窗口
window.close();
});
</script>
</body>
</html>
|
扫一扫
864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
