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#