下载最新的zip压缩包 http://www.uploadify.com
导入default.css,uploadify.css，jQuery脚本，swfobject脚本和Uploadify插件。并且添加调用插件使用$，在您的网页的<head>部分ready事件：
代码
<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>
后台处理：
代码
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 |
|
? |
|
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 |
|
使用图片按钮，设定图片的路径即可。 |
|
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. |