jquery 上传插件 uploadify
jquery 上传插件 uploadify (官网:http://www.uploadify.com/)
uploadify功能强大,支持多文件、批量上传、状态进度条等,提供前端文件限制相关设置。由于是flash环境全面支持asp、asp.net、php等平台;官方目前只提供php程序接入方式,asp.net程序接入在网络上也有很多,而asp程序的只找到一个老外写的,有很多功能调试起来很不太方便,所以我用风声asp无组件上传程序重新整合起来。
主要修改三个文件:
demo.html 该文件用于设置前端相关限制,如文件类型、大小、批量上传等。
upload.asp 该文件主要用于接收demo.html 提交过来的数据、执行上传程序、返回上传结果。
UpLoadClass.asp 该文件为风声ASP无组件上传程序,可在此修改文件上传保存名称、路径、文件类型、大小等。
下面是我模仿QQ中转站的上传界面整合出来的效果图:
demo.html代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<link rel="Stylesheet" href="uploadify.css" />
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="jquery.uploadify.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#uploadify").uploadify({
'uploader': 'uploadify.swf',//指定上传控件的主体文件,默认'uploader.swf'
'script': 'upload.asp',//指定服务器端上传处理文件
'cancelImg': 'cancel.png',//指定取消上传的图片,默认'cancel.png'
//'buttonImg': 'images/button.jpg',//指定浏览文件按钮的图片
//'fileDesc' : '图片文件',//出现在上传对话框中的文件类型描述
//'fileExt' : '*.jpg;*.jpeg;*.gif;*.bmp;*.png',//控制可上传文件的扩展名,启用本项时需同时声明fileDesc
'sizeLimit': 30000000, //控制上传文件的大小,单位byte服务器默认只支持30MB,修改服务器设置请查看相关资料
//'simUploadLimit' :5,//多文件上传时,同时上传文件数目限制
'buttonText':'choose',//按钮显示文字,不支持中文,要用中文直接用背景图片cancelImg设置
//'folder': 'upload',//要上传到的服务器路径(PS:已在服务端设置)
'queueID': 'fileQueue',//队列
'fileDataName': 'Filedata',//提交文件域名称
'auto': false,//选定文件后是否自动上传,默认false
'multi': true,//是否允许同时上传多文件,默认false
'method':'post',//提交方式 post or get
//'scriptData' : {'firstName':'Ronnie','age':30},//提交自定义数据
onComplete:function(event,queueID,fileObj,response,data){//上传成功执行
//返回服务端JSON数据,可在服务端修改返回数据类型
var filetext=eval("(" + response + ")")//解析JSON数据
switch ( filetext.err ) {
case0:
$("#RequestText").prepend('保存时间:' + filetext.time + "<br /><br />");
$("#RequestText").prepend('文件类型:' + filetext.ext + "<br />");
$("#RequestText").prepend('文件大小:' + filetext.size + "<br />");
$("#RequestText").prepend('保存路径:' + filetext.path + "<br />");
$("#RequestText").prepend('保存文件名:' + filetext.savename + "<br />");
$("#RequestText").prepend('<br />文件名:' + filetext.name + "<br />");
break ;
case1:
$("#RequestText").prepend('<br />文件因过大而未被保存<br />');
break ;
case2:
$("#RequestText").prepend('<br />文件类型因不匹配而未被保存<br />');
break ;
case3:
$("#RequestText").prepend('<br />文件因过大并且类型不匹配而未被保存<br />');
break ;
case-1:
$("#RequestText").prepend('<br />没有文件上传<br />');
break ;
}
//返回uploadify数据
//$("#RequestText").append('文件名:' + fileObj.name + "<br />");
//$("#RequestText").append('文件大小:' + fileObj.size + "<br />");
//$("#RequestText").append('创建时间:' + fileObj.creationDate + "<br />");
//$("#RequestText").append('最后修改时间:' + fileObj.modificationDate + "<br />");
//$("#RequestText").append('文件类型:' + fileObj.type + "<br />");
},
});
});
</script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" >
<input type="file" name="uploadify" id="uploadify" />
<a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>| <a href="javascript:$('#uploadify').uploadifyClearQueue()"> 取消上传</a>
<div id="fileQueue"></div>
</form>
<div id="RequestText"></div>
</body>
</html>
upload.asp代码如下:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
OPTION EXPLICIT
Server.ScriptTimeOut=5000
%>
<!-- #include file="UpLoadClass.asp" -->
<%
Dim f_Name,f_SaveName,f_Path,f_Size,f_Ext,f_Err,f_Save,f_Time
dim FileUpload , FormName
FormName = "Filedata"'文件域名称
set FileUpload = New UpLoadClass
FileUpload.Charset="UTF-8"
FileUpload.Open() '开始执行上传程序
f_Err = FileUpload.Form(FormName & "_Err") '获取上传状态
IF f_Err = 0 Then '上传成功
f_Name = FileUpload.Form(FormName & "_Name")'原文件名
f_SaveName = FileUpload.Form(FormName)'保存文件名
f_Path = FileUpload.SavePath'保存路径
f_Size = FileUpload.Form(FormName & "_Size")'文件大小
f_Ext = FileUpload.Form(FormName & "_Ext")'文件类型
f_Time = Now()'保存时间
Response.Write("{""name"":""" & f_Name & """,""savename"":""" & f_SaveName & """,""path"":""" & f_Path & """,""size"":" & f_Size & ",""ext"":""" & f_Ext & """,""time"":""" & f_Time & """,""err"":" & f_Err & "}") '输出JSON数据
Else
Response.Write("{""err"":" & f_Err & "}") ‘返回上传失败原因
End IF
set FileUpload = nothing
%>
UpLoadClass.asp为风声asp无组件上传程序,由于百度文章限制字数,所以这里不贴出来了,大伙可在风声官方网站下载:http://www.fonshen.com
程序已打包好,下载地址为:
115网盘:http://115.com/file/cl7orzho#