Uploadify的一些参数

最新推荐文章于 2021-02-16 07:36:02 发布

jz19890704

最新推荐文章于 2021-02-16 07:36:02 发布

阅读量929

点赞数

分类专栏： web前端

web前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示。不过官方提供的实例时php版本的，本文将详细介绍Uploadify在Aspnet中的使用，您也可以点击下面的链接进行演示或下载。

首先按下面的步骤来实现一个简单的上传功能。

1 创建Web项目，命名为JQueryUploadDemo，从官网上下载最新的版本解压后添加到项目中。

2 在项目中添加JQueryUploadHandler.ashx文件用来处理文件的上传。

3 在项目中添加UploadFile文件夹，用来存放上传的文件。

进行完上面三步后项目的基本结构如下图:

4 Default.aspx的html页的代码修改如下：

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Uploadify</title> <link href="JS/jquery.uploadify-v2.1.0/example/css/default.css" rel="stylesheet" type="text/css" /> <link href="JS/jquery.uploadify-v2.1.0/uploadify.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="JS/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="JS/jquery.uploadify-v2.1.0/swfobject.js"></script> <script type="text/javascript" src="JS/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#uploadify").uploadify({ 'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf', 'script': 'UploadHandler.ashx', 'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png', 'folder': 'UploadFile', 'queueID': 'fileQueue', 'auto': false, 'multi': true }); }); </script></head><body> <div id="fileQueue"></div> <input type="file" name="uploadify" id="uploadify" /> <p> <a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>| <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a> </p></body></html>

5 UploadHandler类的ProcessRequest方法代码如下：

public void ProcessRequest(HttpContext context){ context.Response.ContentType = "text/plain"; context.Response.Charset = "utf-8"; HttpPostedFile file = context.Request.Files["Filedata"]; string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\"; if (file != null) { if (!Directory.Exists(uploadPath)) { Directory.CreateDirectory(uploadPath); } file.SaveAs(uploadPath + file.FileName); //下面这句代码缺少的话，上传成功后上传队列的显示不会自动消失 context.Response.Write("1"); } else { context.Response.Write("0"); } }

6 运行后效果如下图：

Uploadify有一个参数是 buttonText 这个无论你怎么改都不支持中文，因为插件在js里用了一个转码方法把这个参数的值转过码了，解码的地方在那个swf文件里，看不到代码，所以这条路不行。

另一个参数，网上很少提到，是 buttonImg( 按钮图片)，这时你完全可以用一个图片来替换掉插件自带的那个黑色的flash浏览按钮，只要你自己的图片上是中文，这不就解决了中文按钮问题么？如果只加这一个，你会发现你的按钮图片下面有一片白色区域，其实就是那个flash留下的，白色区域表示鼠标可用范围，这个范围可以用width,height来调整。还有一个参数 wmode 它的默认值是opaque，把它改成transparent就行了，也就是把那片白色区域透明化

如果您在上传的过程中出现了乱码，无非是程序编码和系统编码不一致造成的，于是尝试修改uploadify.php文件。您可以尝试将move_uploaded_file($tempFile,$targetFile); 修改为move_uploaded_file($tempFile,iconv("UTF-8","gb2312", $targetFile)); 刷新页面，上传中文文件。

下面介绍一下它的一些参数：

uploader ： uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后弹出打开文件对话框，默认值：uploadify.swf。

　　script ：后台处理程序的相对路径。默认值：uploadify.php

　　checkScript ：用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径

　　fileDataName ：设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata

　　method ：提交方式Post 或Get 默认为Post

　　scriptAccess ：flash脚本文件的访问模式，如果在本地测试设置为always，默认值：sameDomain

　　folder ：上传文件存放的目录。

　　queueID ：文件队列的ID，该ID与存放文件队列的div的ID一致。

　　queueSizeLimit ：当允许多文件生成时，设置选择文件的个数，默认值：999 。

　　multi ：设置为true时可以上传多个文件。

　　auto ：设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传。

　　fileDesc ：这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本。

　　fileExt ：设置可以选择的文件的类型，格式如：'*.doc;*.pdf;*.rar' 。

　　sizeLimit ：上传文件的大小限制。

　　simUploadLimit ：允许同时上传的个数默认值：1 。

　　buttonText ：浏览按钮的文本，默认值：BROWSE 。

　　buttonImg ：浏览按钮的图片的路径。

　　hideButton ：设置为true则隐藏浏览按钮的图片。

　　rollover ：值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果。

　　width ：设置浏览按钮的宽度，默认值：110。

　　height ：设置浏览按钮的高度，默认值：30。

　　wmode ：设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层。默认值：opaque 。

　　cancelImg ：选择文件到文件队列中后的每一个文件上的关闭按钮图标

上面介绍的key值的value都为字符串或是布尔类型，比较简单，接下来要介绍的key值的value为一个函数，可以在选择文件、出错或其他一些操作的时候返回一些信息给用户。

onInit : 做一些初始化的工作。

onSelect ：选择文件时触发，该函数有三个参数

event:事件对象。
queueID：文件的唯一标识，由6为随机字符组成。
fileObj：选择的文件对象，有name、size、creationDate、modificationDate、type 5个属性。

代码如下：

$(document).ready(function(){ $("#uploadify").uploadify({ 'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf', 'script': 'UploadHandler.ashx', 'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png', 'folder': 'UploadFile', 'queueID': 'fileQueue', 'auto': false, 'multi': true, 'onInit':function(){alert("1");}, 'onSelect': function(e, queueId, fileObj) { alert("唯一标识:" + queueId + "\r\n" + "文件名：" + fileObj.name + "\r\n" + "文件大小：" + fileObj.size + "\r\n" + "创建时间：" + fileObj.creationDate + "\r\n" + "最后修改时间：" + fileObj.modificationDate + "\r\n" + "文件类型：" + fileObj.type ); } });});

当选择一个文件后弹出的消息如下图：

onSelectOnce ：在单文件或多文件上传时，选择文件时触发。该函数有两个参数event，data，data对象有以下几个属性：

fileCount：选择文件的总数。
filesSelected：同时选择文件的个数，如果一次选择了3个文件该属性值为3。
filesReplaced：如果文件队列中已经存在A和B两个文件，再次选择文件时又选择了A和B，该属性值为2。
allBytesTotal：所有选择的文件的总大小。

onCancel : 当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、data四个参数，前三个参数同onSelect 中的三个参数，data对象有两个属性fileCount和allBytesTotal。

fileCount：取消一个文件后，文件队列中剩余文件的个数。
allBytesTotal：取消一个文件后，文件队列中剩余文件的大小。

onClearQueue ：当调用函数fileUploadClearQueue时触发。有event和data两个参数，同onCancel 中的两个对应参数。

onQueueFull ：当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发。该函数有两个参数event和queueSizeLimit。

onError ：当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数，其中前三个参数同上，errorObj对象有type和info两个属性。

type：错误的类型，有三种‘HTTP’, ‘IO’, or ‘Security’
info：错误的描述

onOpen ：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列。该函数有event、queueId、fileObj三个参数，参数的解释同上。

onProgress ：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列，在onOpen之后触发。该函数有event、queueId、fileObj、data四个参数，前三个参数的解释同上。data对象有四个属性percentage、bytesLoaded、allBytesLoaded、speed：

percentage：当前完成的百分比
bytesLoaded：当前上传的大小
allBytesLoaded：文件队列中已经上传完的大小
speed：上传速率 kb/s

onComplete：文件上传完成后触发。该函数有四个参数event、queueId、fileObj、response、data五个参数，前三个参数同上。response为后台处理程序返回的值，在上面的例子中为1或0，data有两个属性fileCount和speed

fileCount：剩余没有上传完成的文件的个数。
speed：文件上传的平均速率 kb/s

onAllComplete：文件队列中所有的文件上传完成后触发。该函数有event和data两个参数，data有四个属性，分别为：

filesUploaded :上传的所有文件个数。
errors ：出现错误的个数。
allBytesLoaded ：所有上传文件的总大小。
speed ：平均上传速率 kb/s

相关函数介绍

在上面的例子中已经用了uploadifyUpload和uploadifyClearQueue两个函数，除此之外还有几个函数：

uploadifySettings：可以动态修改上面介绍的那些key值，如下面代码

$('#uploadify').uploadifySettings('folder','JS');

如果上传按钮的事件写成下面这样，文件将会上传到uploadifySettings定义的目录中

uploadifyCancel：该函数接受一个queueID作为参数，可以取消文件队列中指定queueID的文件。

$('#uploadify').uploadifyCancel(id);

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

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.

jz19890704

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录