Uploadify插件的使用（jQuery上传插件）

下载最新的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.