博客园  :: 联系 :: 管理

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

Posted on 2010-01-31 12:55  独孤雁  阅读(1458)  评论(0)  编辑  收藏  举报

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