<%@ page language=
"java"
contentType=
"text/html; charset=UTF-8"
pageEncoding=
"UTF-8"
%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=UTF-8"
>
<title>Insert title here</title>
<!--引入jquery.js-->
<script src=
"scripts/jquery-1.10.2.min.js"
></script>
<!--引入uploadify.js-->
<script src=
"scripts/jquery.uploadify.min.js"
type=
"text/javascript"
></script>
<!--引入uploadify.css-->
<link href=
"css/uploadify.css"
rel=
"stylesheet"
type=
"text/css"
/>
<!--引入自己写的css-->
<link href=
"css/customer.css"
rel=
"stylesheet"
type=
"text/css"
/>
<script type=
"text/javascript"
>
$(function() {
$(
"#upload_org_code"
).uploadify({
'auto'
:
true
,
'buttonClass'
:
'mybutton'
,
'buttonCursor'
:
'hand'
,
'buttonText'
:
'选择图片'
,
'fileSizeLimit'
:
'2MB'
,
'height'
:
27
,
'width'
:
80
,
'fileTypeExts'
:
'*.jpg;*.jpge;*.gif;*.png'
,
'fileTypeDesc'
:
'请选择jpg,jpge,jif,png后缀结尾的图片'
,
'progressData'
:
'speed'
,
'queueID'
:
'some_file_queue'
,
'removeCompleted'
:
false
,
'queueSizeLimit'
:
2
,
'removeTimeout'
:
1
,
'swf'
:
'${pageContext.request.contextPath}/scripts/uploadify.swf'
,
<!--这是关键,上传后台处理的servlet地址-->
'uploader'
:
'${pageContext.request.contextPath}/uploadifyServlet'
,
'multi'
:
false
,
'overrideEvents'
: [
'onSelectError'
,
'onDialogClose'
,
'onCancel'
,
'onClearQueue'
],
'onCancel'
:function(file){
console.log(file.name);
},
'onClearQueue'
:function(queueItemCount){
console.log(queueItemCount);
},
'onDestroy'
:function(){
console.log(
'destory'
);
},
'onDialogClose'
:function(queueData){
console.log(queueData.filesSelected );
console.log(queueData.filesQueued );
},
'onUploadSuccess'
:function(file,data,response){
$(
'#'
+ file.id).find(
'.data'
).html(
''
);
console.log(
'data='
+data);
$(
"#upload_org_code_name"
).val(data);
<!--这是关键,预览后台处理的servlet地址-->
$(
"#upload_org_code_img"
).attr(
"src"
,
"${pageContext.request.contextPath}/getImgServlet?file="
+data);
$(
"#upload_org_code_img"
).show();
},
'onSelectError'
:function(file, errorCode, errorMsg){
switch
(errorCode) {
case
-
110
:
alert(
"文件 ["
+file.name+
"] 大小超出系统限制的"
+ jQuery(
'#upload_org_code'
).uploadify(
'settings'
,
'fileSizeLimit'
) +
"大小!"
);
break
;
case
-
120
:
alert(
"文件 ["
+file.name+
"] 大小异常!"
);
break
;
case
-
130
:
alert(
"文件 ["
+file.name+
"] 类型不正确!"
);
break
;
}
},
});
});
</script>
</head>
<body>
<!--用于图片预览的显示-->
<img style=
"display: none"
id=
"upload_org_code_img"
src=
""
width=
"100"
height=
"100"
/>
<input type=
"file"
name=
"upload_org_code"
id=
"upload_org_code"
/>
<!--自定义的一个queue-->
<div id=
"some_file_queue"
>
</div>
<!--一些操作啦-->
<a href=
"javascript:jQuery('#upload_org_code').uploadify('upload','*');"
>上传</a>
<a href=
"javascript:$('#upload_org_code').uploadify('cancel','*')"
>取消上传</a>
<a href=
"javascript:$('#upload_org_code').uploadify('destroy')"
>destory</a>
</body>
</html>