下载最新的zip压缩包 http://www.uploadify.com
导入default.css,uploadify.css,jQuery脚本,swfobject脚本和Uploadify插件。并且添加调用插件使用$,在您的网页的<head>部分ready事件:
![](https://i-blog.csdnimg.cn/blog_migrate/81178cc93a2a3bb5048d90d76e7ec935.gif)
< script language ="javascript" type ="text/javascript" >
$(document).ready( function (){
$( " #uploadify " ).uploadify({
' uploader ' : ' uploadify.allglyphs.swf ' ,
' script ' : ' http://www.cnblogs.com/Service/uploadXsNetshopHuxing.ashx ' ,
' cancelImg ' : ' cancel.png ' ,
' folder ' : ' UploadFile ' ,
' queueID ' : ' fileQueue ' ,
' auto ' : false ,
' scriptData ' :{ ' houseID ' : ' <%= intHouseID %> ' , ' houseType ' : 1 },
' fileExt ' : ' *.jpg;*.gif ' ,
' fileDesc ' : ' 请选择jpg或gif文件格式 ' ,
' fileDataName ' : ' imgpreview ' ,
' multi ' : false ,
' sizeLimit ' : 1000000 ,
' onComplete ' : function (event,queueId,fileObj,response,data)
{
$( " #uploadbtn1 " ).html( " <img src=' " + fileObj.filePath + " ' width='600px' /> " );
}
// 'uploader': 'uploadify.allglyphs.swf',
// 'cancelImg': 'cancel.png',
// 'script': 'uploadfile.asp',
// 'multi': true,
// 'buttonText': 'Browse',
// 'displayData': 'speed',
// 'simUploadLimit': 2,
// 'fileDataName': 'imgpreview'
});
$( " #uploadify2 " ).uploadify({
' uploader ' : ' uploadify.allglyphs.swf ' ,
' script ' : ' http://www.cnblogs.com/Service/uploadXsNetshopHuxing.ashx ' ,
' cancelImg ' : ' cancel.png ' ,
' folder ' : ' UploadFile ' ,
' queueID ' : ' fileQueue2 ' ,
' scriptData ' :{ ' houseID ' : ' <%= intHouseID %> ' , ' houseType ' : 2 },
' auto ' : false ,
' fileExt ' : ' *.jpg;*.gif ' ,
' fileDesc ' : ' 请选择jpg或gif文件格式 ' ,
' fileDataName ' : ' imgpreview ' ,
' multi ' : true ,
' queueSizeLimit ' : ' 2 ' ,
' sizeLimit ' : 1000000 ,
' onAllComplete ' : function ()
{
$( " #uploadbtn2 " ).fadeOut( 250 );
},
' onComplete ' : function (event, ID, fileObj, response, data)
{
$( " #loadImage " ).append( " <img src=' " + fileObj.filePath + " ' width='600px' /> " );
}
});
}
);
</ script >
后台处理:
![](https://i-blog.csdnimg.cn/blog_migrate/81178cc93a2a3bb5048d90d76e7ec935.gif)
public class uploadXsNetshopHuxing : IHttpHandler
{
PhotoHelper photoHelper = new PhotoHelper();
bllXsHouseImages bllImage = new bllXsHouseImages();
public void ProcessRequest(HttpContext context)
{
context.Response.Charset = " utf-8 " ;
context.Response.ContentType = " text/plain " ;
HttpPostedFile file = context.Request.Files[ " imgpreview " ];
int HouseType = Convert.ToInt32(context.Request.Params[ " houseType " ]);
int HouseID = Convert.ToInt32(context.Request.Params[ " houseID " ]);
string uploadPath = HttpContext.Current.Server.MapPath(@context.Request[ " folder " ]) + " // " ;
if (file != null )
{
if ( ! Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
string filename = file.FileName; // +;
int dot = filename.IndexOf( ' . ' );
filename = filename.Substring( 0 , dot) + " - " + DateTime.Now.Millisecond.ToString() + filename.Substring(dot, filename.Length - dot);
file.SaveAs(uploadPath + filename);
StringBuilder ImagePath = new StringBuilder();
ImagePath.Append(HttpContext.Current.Server.MapPath( " ~ " ));
ImagePath.Append( @" upload/houseImage/ " );
ImagePath.Append(DateTime.Now.Date.ToString( " yyyyMMdd " ));
string strImagePath = ImagePath.ToString();
if (HouseType == 1 )
{
string x80Path = ImagePath.ToString() + " //100x75// " ;
if ( ! Directory.Exists(x80Path))
{
Directory.CreateDirectory(x80Path);
}
photoHelper.MakeThumbnail(uploadPath + filename, x80Path.ToString() + filename, 100 , 75 , " Cut " );
}
string waterPath = ImagePath.ToString() + " //water// " ;
if ( ! Directory.Exists(waterPath))
{
Directory.CreateDirectory(waterPath);
}
photoHelper.AddWaterPic(uploadPath + filename, waterPath.ToString() + filename, HttpContext.Current.Server.MapPath( " ~ " ) + @" upload/logo_water.png " );
// 下面这句代码缺少的话,上传成功后上传队列的显示不会自动消失
bllImage.addXsHxImage(HouseID, @" ~/upload/houseImage/ " + DateTime.Now.Date.ToString( " yyyyMMdd " ) + @" /[type]/ " + filename, HouseType);
context.Response.Write( " 1 " );
}
else
{
context.Response.Write( " 0 " );
}
}
public bool IsReusable
{
get
{
return false ;
}
}
}
以下是可选项的参数说明:(红色的属性代表常用的)
1 | uploader | 上传控件的主体文件,flash控件 默认值='uploadify.swf' |
2 | script
| 相对路径的后端脚本,它将处理您上传的文件。 绝对路径前缀或'/'或'http'的路径 默认值='uploadify.php' |
3 | checkScript
| 检查该文件是否已经选择驻留在服务器上。 |
4 | scriptData
| 可提供URL传递参数。用来传递get参数。例如: index.jsp?id=1&action=uploadify可以设置成: 'script': 'index.jsp', 'scriptData':{'id':1,'action':'uploadify'}, 注:要设置‘method’:‘GET’.
|
5 | fileDataName
| 您的文件在上传服务器脚本阵列的名称。 |
6 | method
| 设置为发送到后端脚本的方法。要么'get'或post'。 默认值'post' |
7 | scriptAccess
| ? |
8 | folder
| 您想将文件保存到的路径。考虑到安全问题,一般并不在客户端设定后供服务器得到所存的路径。我试了下。这个参数好像以get的方式传递的。设定post得不到这个值。 |
9 | queueID
| 文件队列ID。与div的id一致。参考上一篇例子的用法。 |
10 | queueSizeLimit
| 限制在一次队列中的次数(可选定几个文件)。默认值= 999,而一次可传几个文件有 simUploadLimit属性决定。 |
11 | multi
| 是否允许同时上传多文件,可设定true或false。 默认false。设定true时,选中的文件是当前项。 |
12 | auto
| 选定文件后是否自动上传,可设定true或false。 默认false |
13 | fileDesc
| 出现在上传对话框中的文件类型描述。与fileExt需同时使用 |
14 | fileExt
| 支持的格式,启用本项时需同时声明fileDesc。 如:‘*.rar,*.doc
|
15 | sizeLimit
| 控制上传文件的大小,单位byte |
16 | simUploadLimit
| 多文件上传时,同时上传文件数目限制。默认1 一次可传几个文件。 |
17 | buttonText
| 默认按钮的名字。默认BROWER |
18 | buttonImg
| 使用图片按钮,设定图片的路径即可。 |
19 | hideButton
| 上传按钮的隐藏。true 或false。默认flase |
20 | rollover
| ? |
21 | width
| 按钮图片的长度。默认 110 |
22 | height
| 按钮图片的高度。默认 30 |
23 | wmode
| 背景透明transparent 与不透明opaque设定。默认 不透明
|
24 | cancelImg
| 取消按钮。设定图片路径。默认cancel.png
|
25 | onInit
| 函数, 初始化时的状态。 onInit: function() { $("#id").html("上传前");}, |
26 | onComplete
| 函数:可传递五个参数 event: 事件对象 queueID: 完成文件的唯一标识符。 fileObj: • name – 文件名 • filepath –上传路径 • size – 文件大小 • creationDate – 文件创建时间 • modificationDate –文件最近修改时间 • type –文件的扩展名 response: 服务器回调的数据 data: • fileCount – The total number of files left in the queue • speed – 平均上传速度 KB/s 如: onComplete: function(event, queueID, fileObj) { alert("文件:" +fileObj.name + "上传失败"); }
|
27 | onSelectOnce
| 函数:可传递二个参数 event: The event object. data: An object containing details about the select operation. • fileCount – The total number of files in the queue • filesSelected – The number of files selected in the select operation • filesReplaced – The number of files that were replaced in the queue • allBytesTotal – The total number of bytes for all files in the queue
|
28 | onCancel
| 函数:可传递四个参数 event: The event object. queueID: The unique identifier of the file that was cancelled. fileObj: An object containing details about the file that was selected. • name – The name of the file • size – The size in bytes of the file • creationDate – The date the file was created • modificationDate – The last date the file was modified • type – The file extension beginning with a '.'
data: Details about the file queue. • fileCount – The total number of files left in the queue • allBytesTotal – The total number of bytes left for all files in the queue
|
29 | onClearQueue
| 函数:可传递一个参数 event: The event object. |
30 | onQueueFull
| 函数:可传递二个参数 • event - The event object. • queueSizeLimit - The maximum size of the queue.
|
31 | onError
| 函数:可传递四个参数
event: The event object. queueID: The unique identifier of the file that was errored. fileObj: An object containing details about the file that was selected. • name – The name of the file • size – The size in bytes of the file • creationDate – The date the file was created • modificationDate – The last date the file was modified • type – The file extension beginning with a '.' errorObj: An object containing details about the error returned. • type – Either 'HTTP', 'IO', or 'Security' • info – An error message describing the type of error returned
|
32 | onOpen
| 函数:可传递三个参数 event: The event object. queueID: The unique identifier of the file that was opened. fileObj: An object containing details about the file that was selected. • name – The name of the file • size – The size in bytes of the file • creationDate – The date the file was created • modificationDate – The last date the file was modified • type – The file extension beginning with a '.'
|
33 | onProgress
| 函数:可传递四个参数 event: The event object. queueID: The unique identifier of the file that was updated. fileObj: An object containing details about the file that was selected. • name – The name of the file • size – The size in bytes of the file • creationDate – The date the file was created • modificationDate – The last date the file was modified • type – The file extension beginning with a '.'
data: An object containing details about the upload and queue. • percentage – The current percentage completed for the upload • bytesLoaded – The current amount of bytes uploaded • allBytesLoaded – The current amount of bytes loaded for all files in the queue • speed – The current upload speed in KB/s
|
34 | onSelect
| event: The event object. queueID: The unique identifier of the file that was selected. fileObj: An object containing details about the file that was selected. • name – The name of the file • size – The size in bytes of the file • creationDate – The date the file was created • modificationDate – The last date the file was modified • type – The file extension beginning with a '.'
|
35 | onAllComplete
| 函数:可传递二个参数
event: The event object. data: An object containing details about the upload process. • filesUploaded – The total number of files uploaded • errors – The total number of errors while uploading • allbytesLoaded – The total number of bytes uploaded • speed – The average speed of all uploaded files
|
36 | onCheck
| 函数:可传递五个参数
event: The event object. checkScript: The path to the file checking script. fileQueue: A file queue object consisting of key/value pairs with the queue ID as the key and the filename as the value. folder: The path to the upload folder. single: True if only one file is being uploaded from the queue. |