首页 > 代码库 > uploadify异步上传组件
uploadify异步上传组件
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="http://www.mamicode.com/${ctxStatic}/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/${ctxStatic }/fileupload/jquery.uploadify.min.js"></script>
<link href="http://www.mamicode.com/${ctxStatic}/fileupload/uploadify.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript">
$(function(){
//类型
var caseId = $("#caseId").val();
$("#titles").html("最大100MB，支持格式为：*.zip; *.rar; *.gz; *.tar; *.bz2;*.png *.jpg *.jpeg ");
var fileSuffixes=‘*.zip;*.rar;*.gz;*.tar;*.bz2;*.png;*.jpg;*.jpeg‘;
var fileTitleType=‘压缩包或图片‘;
var maxFileSize=‘100MB‘;
var url=‘${ctx}/urge-server/caseCenterCtrl/changeFileUpload.do?caseId=‘+caseId;
//jquery插件上传文件
$("#uploadify").uploadify({
‘swf‘:‘${ctxStatic}/fileupload/uploadify.swf‘,
‘uploader‘:url,
‘buttonText‘:‘‘,//按钮的文件为空，显示图片上的文件
// ‘queueID‘:‘fileQueue‘, 加上他不显示滚动条
‘auto‘:true,//选择图片后是否自动上传，默认为false
‘multi‘:false,//是否支持多文件上传 默认为true 支持多个
‘fileTypeDesc‘:fileTitleType,//打开窗口提示
‘fileTypeExts‘:fileSuffixes,//文件类型
‘fileSizeLimit‘:maxFileSize,//文件上传大小控制kb为单位
‘simUploadLimit‘:1,//一次同步上传的文件数目
‘queueSizeLimit‘:1,//可上传文件的个数
‘removeTimeout‘:1,//上传完成之后，多久消失 3s
‘buttonClass‘:‘buttonCss‘,//额外增加的文件上传的样式,把原本的样式替换为图片
‘onSelect‘: function(file){//选择文件时触发
//附件原名称
$("#adjunctName").val(file.name);
},
onUploadSuccess:function(file,data,response){
if(data.indexOf("javascript")==-1){
//上传的存储路径
var fileName=$("#adjunctName").val();
if(data.indexOf("###")>=0){
var str=data.split("###");
$("#changeAdjunctUrl").val(str[0]);
}
$("#result").html("<font style=‘color:black;font-size:12px;‘>"+fileName+"</font>上传成功！ </span>");
// window.parent.location.reload();
}else{
alert("会话超时，请重新登录");
top.location.href=http://www.mamicode.com/‘‘;
}
},
onUploadError:function(file,errorCode,errorMsg,errorString){
if (errorCode == SWFUpload.UPLOAD_ERROR.FILE_CANCELLED
|| errorCode == SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED) {
return;
}else{
alert(errorMsg);
}
}
});
});
//点击删除 删除刚才上传的文件
function deleteFile(){
if(confirm("确定要删除吗？")){
var adjunctUrl = $(‘#changeAdjunctUrl‘).val();
if(adjunctUrl.length>0){
$.ajax({
type:"POST",
url:"${ctx}/crm-server/cusChange/fileDelete.do?fileUrl="+adjunctUrl,
success:function(data){
if(data=http://www.mamicode.com/=0){
$("#changeBillId1",parent.document).click().val("");
$("#changeBillId2",parent.document).click().val("");
$("#result").html("文件删除成功！");
}else{
$("#result").html("文件删除失败！");
}
}
});
}else{
alert("您已删除，不需要重复操作");
}
}
}
</script>
</head>
<body>
<form enctype="multipart/form-data" method="post">
<div style="vertical-align:middle;">
<input type="hidden" name="caseId" id="caseId" value="http://www.mamicode.com/${caseId}"/>
<input type="file" name="uploadify" id="uploadify"/>
<span id="result" style="font-size: 14px;color: red;font-family:‘微软雅黑‘;"></span><!-- 最大支持5M，支持格式为：.jpg .jpeg .gif -->
<span id="titles" style="font-size: 12px;color: red;width: 500px;font-family:‘微软雅黑‘;position:absolute;top: 13px;left: 100px; ">最大100MB，支持格式为：*.zip; *.rar; *.gz; *.tar; *.bz2;*.png *.jpg *.jpeg </span>
<input type="hidden" name="changeAdjunctUrl" id="changeAdjunctUrl"/>
<input type="hidden" id="adjunctName"/>
</div>
</form>
</body>
</html>
uploadify异步上传组件