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/javas
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为一个函数,可以在选择文件、出错或其他一些操作的时候返回一些信息给用户。
on
on
- 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, 'on
当选择一个文件后弹出的消息如下图:
on
- fileCount:选择文件的总数。
- filesSelected:同时选择文件的个数,如果一次选择了3个文件该属性值为3。
- filesReplaced:如果文件队列中已经存在A和B两个文件,再次选择文件时又选择了A和B,该属性值为2。
- allBytesTotal:所有选择的文件的总大小。
on
- fileCount:取消一个文件后,文件队列中剩余文件的个数。
- allBytesTotal:取消一个文件后,文件队列中剩余文件的大小。
on
on
on
- type:错误的类型,有三种‘HTTP’, ‘IO’, or ‘Security’
- info:错误的描述
on
on
- percentage:当前完成的百分比
- bytesLoaded:当前上传的大小
- allBytesLoaded:文件队列中已经上传完的大小
- speed:上传速率 kb/s
on
- fileCount:剩余没有上传完成的文件的个数。
- speed:文件上传的平均速率 kb/s
on
- filesUploaded :上传的所有文件个数。
- errors :出现错误的个数。
- allBytesLoaded :所有上传文件的总大小。
- speed :平均上传速率 kb/s
相关函数介绍
在上面的例子中已经用了uploadifyUpload和uploadifyClearQueue两个函数,除此之外还有几个函数:
uploadifySettings:可以动态修改上面介绍的那些key值,如下面代码
$('#uploadify').uploadifySettings('folder','JS');
如果上传按钮的事件写成下面这样,文件将会上传到uploadifySettings定义的目录中
<a href="javas
uploadifyCancel:该函数接受一个queueID作为参数,可以取消文件队列中指定queueID的文件。
$('#uploadify').uploadifyCancel(id);
以下是可选项的参数说明:(红色的属性代表常用的)
1 |
uploader |
上传控件的主体文件,flash控件 |
2 |
script |
相对路径的后端脚本,它将处理您上传的文件。 绝对路径前缀或'/'或'http'的路径 |
3 |
checkScript |
检查该文件是否已经选择驻留在服务器上。 |
4 |
scriptData |
可提供URL传递参数。用来传递get参数。例如: 'script': 'index.jsp', 'scriptData':{'id':1,'action':'uploadify'}, 注:要设置‘method’:‘GET’. |
5 |
fileDataName |
|
6 |
method |
|
7 |
|
|
8 |
folder |
您想将文件保存到的路径。考虑到安全问题,一般并不在客户端设定后供服务器得到所存的路径。我试了下。这个参数好像以get的方式传递的。设定post得不到这个值。 |
9 |
queueID |
|
10 |
queueSizeLimit |
限制在一次队列中的次数(可选定几个文件)。默认值= 999,而一次可传几个文件有 simUploadLimit属性决定。 |
11 |
multi |
是否允许同时上传多文件,可设定true或false。 |
12 |
auto |
选定文件后是否自动上传,可设定true或false。 |
13 |
fileDesc |
出现在上传对话框中的文件类型描述。与fileExt需同时使用 |
14 |
fileExt |
支持的格式,启用本项时需同时声明fileDesc。 如:‘*.rar,*.doc |
15 |
sizeLimit |
控制上传文件的大小,单位byte |
16 |
simUploadLimit |
多文件上传时,同时上传文件数目限制。默认1 |
17 |
buttonText |
默认按钮的名字。默认BROWER |
18 |
|
使用图片按钮,设定图片的路径即可。 |
19 |
hideButton |
上传按钮的隐藏。true 或false。默认flase |
20 |
rollover |
|
21 |
width |
|
22 |
height |
|
23 |
wmode |
|
24 |
cancelImg |
|
25 |
onInit |
函数, 初始化时的状态。 onInit: function() { $("#id").html("上传前");}, |
26 |
onComplete |
event: 事件对象 queueID: 完成文件的唯一标识符。 fileObj: response: 服务器回调的数据 data: 如: onComplete: function(event, queueID, fileObj) { |
27 |
onSelectOnce |
函数:可传递二个参数 event: The event object. data: An object containing details about the select operation. |
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. data: Details about the file 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. errorObj: An object containing details about the 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. |
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. data: An object containing details about the upload and queue. |
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. |
35 |
onAllComplete |
event: The event object. data: An object containing details about the upload process. |
36 |
onCheck |
函数:可传递五个参数 event: The event object. checkScript: The path to the file checking script. fileQueue: A file queue object consisting of folder: The path to the upload folder. single: True if only one file is being uploaded from the queue. |
- 最新文章
-
Python-Redis-List
Python-Redis-Hash
Python-Redis-String
【leetcode】1012. Complement of Base 10 Integer
【leetcode】124. Binary Tree Maximum Path Sum
【leetcode】148. Sort List
【leetcode】609. Find Duplicate File in System
【leetcode】1008. Construct Binary Search Tree from Preorder Traversal
【leetcode】623. Add One Row to Tree
【leetcode】174. Dungeon Game