zoukankan html css js c++ java

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;
            }
        }
    }

以下是可选项的参数说明：（红色的属性代表常用的)

uploader

上传控件的主体文件，flash控件

默认值='uploadify.swf'

script

相对路径的后端脚本，它将处理您上传的文件。

绝对路径前缀或'/'或'http'的路径

默认值='uploadify.php'

checkScript

检查该文件是否已经选择驻留在服务器上。
没有默认值。官方例子中'check.php'是提供核心文件

scriptData

可提供URL传递参数。用来传递get参数。例如：

index.jsp?id=1&action=uploadify可以设置成：

'script': 'index.jsp',

'scriptData':{'id':1,'action':'uploadify'},

注：要设置‘method’：‘GET’.

fileDataName

您的文件在上传服务器脚本阵列的名称。
默认值='Filedata'

method

设置为发送到后端脚本的方法。要么'get'或post'。

默认值'post'

scriptAccess

folder

您想将文件保存到的路径。考虑到安全问题，一般并不在客户端设定后供服务器得到所存的路径。我试了下。这个参数好像以get的方式传递的。设定post得不到这个值。

queueID

文件队列ID。与div的id一致。参考上一篇例子的用法。

queueSizeLimit

限制在一次队列中的次数（可选定几个文件）。默认值= 999，而一次可传几个文件有 simUploadLimit属性决定。

multi

是否允许同时上传多文件，可设定true或false。

默认false。设定true时，选中的文件是当前项。

auto

选定文件后是否自动上传，可设定true或false。

默认false

fileDesc

出现在上传对话框中的文件类型描述。与fileExt需同时使用

fileExt

支持的格式，启用本项时需同时声明fileDesc。

如：‘*.rar,*.doc

sizeLimit

控制上传文件的大小，单位byte

simUploadLimit

多文件上传时，同时上传文件数目限制。默认1

一次可传几个文件。

buttonText

默认按钮的名字。默认BROWER

buttonImg

使用图片按钮，设定图片的路径即可。

hideButton

上传按钮的隐藏。true 或false。默认flase

rollover

？

width

按钮图片的长度。默认 110

height

按钮图片的高度。默认 30

wmode

背景透明transparent 与不透明opaque设定。默认不透明

cancelImg

取消按钮。设定图片路径。默认cancel.png

onInit

函数，初始化时的状态。

onInit: function() {

$("#id").html("上传前");},

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 + "上传失败"); }

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

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

onClearQueue

函数：可传递一个参数

event: The event object.

onQueueFull

函数：可传递二个参数

• event - The event object.

• queueSizeLimit - The maximum size of the queue.

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

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 '.'

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

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 '.'

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

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.

查看全文

相关阅读:
使用Docker-compose部署MySQL测试环境
 使用MySQL SQL线程回放Binlog实现恢复
 MySQL 插件之连接控制插件(Connection-Control)
sysbench工具使用
 故障分析--主从复制故障1
MySQL性能指标计算方式
 AJAX的同步异步；EZView.js 图片预览和pdf预览
 Caused by: java.lang.ClassNotFoundException: org.springframework.context.App
解决Myeclipse或Eclipse出现JPA project Change Event Handler问题的解决办法
 java中转换为string的方法；eques和==区别

原文地址：https://www.cnblogs.com/5tao/p/1660421.html