码迷,mamicode.com
首页 > Web开发 > 详细

uploadify异步上传组件

时间:2014-11-28 14:15:08      阅读:302      评论:0      收藏:0      [点我收藏+]

标签:des   style   io   ar   color   os   sp   java   for   

<%@ 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="${ctxStatic}/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="${ctxStatic }/fileupload/jquery.uploadify.min.js"></script>
<link href="${ctxStatic}/fileupload/uploadify.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript">
$(function(){
//类型
var caseId = $("#caseId").val();
$("#titles").html("最大100MB,支持格式为:*.zip;&nbsp;*.rar;&nbsp;*.gz;&nbsp;*.tar;&nbsp;*.bz2;*.png&nbsp;*.jpg&nbsp;*.jpeg&nbsp;");
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>上传成功!&nbsp;&nbsp;</span>");
// window.parent.location.reload();
}else{
alert("会话超时,请重新登录");
top.location.href=‘<%=basePath%>‘;
}
},
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==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="${caseId}"/>
<input type="file" name="uploadify" id="uploadify"/>
<span id="result" style="font-size: 14px;color: red;font-family:‘微软雅黑‘;"></span><!-- 最大支持5M,支持格式为:.jpg&nbsp;.jpeg&nbsp;.gif&nbsp; -->
<span id="titles" style="font-size: 12px;color: red;width: 500px;font-family:‘微软雅黑‘;position:absolute;top: 13px;left: 100px; ">最大100MB,支持格式为:*.zip;&nbsp;*.rar;&nbsp;*.gz;&nbsp;*.tar;&nbsp;*.bz2;*.png&nbsp;*.jpg&nbsp;*.jpeg&nbsp;</span>
<input type="hidden" name="changeAdjunctUrl" id="changeAdjunctUrl"/>
<input type="hidden" id="adjunctName"/>
</div>
</form>
</body>
</html>

 

uploadify异步上传组件

标签:des   style   io   ar   color   os   sp   java   for   

原文地址:http://www.cnblogs.com/yy123/p/4128333.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!