下载最新的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 | 检查该文件是否已经选择驻留在服务器上。
没有默认值。 官方例子中'check.php'是提供核心文件 |
4 | scriptData | 可提供URL传递参数。用来传递get参数。例如： index.jsp?id=1&action=uploadify可以设置成： 'script': 'index.jsp', 'scriptData':{'id':1,'action':'uploadify'}, 注：要设置‘method’：‘GET’. |
5 | fileDataName | 您的文件在上传服务器脚本阵列的名称。
默认值='Filedata' |
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. |
570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
