uploadify 一次选择多个文件上传
HTML代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <title>uploadify -- 示例</title> <script type="text/javascript" src="uploader/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="uploader/jquery.uploadify.v2.1.0.min.js"></script> <script type="text/javascript" src="uploader/swfobject.js"></script> <link type="text/css" href="uploader/uploadify.css" rel="stylesheet" /> <style type="text/css"> .wrapper{ width:400px; margin:10px auto} </style> </head> <body> <form id="form1" runat="server"> <div class="wrapper"> <b>uploadify 示例程序</b> <div id="fileInput1"> </div> <a href="javascript:$('#fileInput1').uploadifyUpload()">上传</a> | <a href="javascript:$('#fileInput1').uploadifyClearQueue()"> 取消上传</a> </div> <script type="text/javascript"> $("#fileInput1").uploadify({ 'uploader': 'uploader/uploadify.swf', 'method': 'GET', 'script': 'uploadfile.aspx', 'cancelImg': 'uploader/cancel.png', 'auto': false, 'multi': true, }); </script> </form> </body> </html> |
因为该插件是使用flash的，因此我们用swfobject.js来处理flash，SWFObject是一个用于在HTML中方面插入Adobe Flash媒体资源（*.swf文件）的独立、敏捷的JavaScript模块。该模块中的JavaScript脚本能够自动检测PC、Mac机器上各种主流浏览器对Flash插件的支持情况。它使得插入Flash媒体资源尽量简捷、安全。而且它是非常符合搜索引擎优化的原则的。此外，它能够避免您的 HTML、XHTML中出现object、embed等非标准标签，从而符合更加标准。
上传文件c#代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
public partial class uploadfile : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { try { //获取上传的文件数据 HttpPostedFile file = Request.Files["Filedata"]; string fileName = file.FileName; //由于不同浏览器取出的FileName不同（有的是文件绝对路径，有的是只有文件名），故要进行处理 if (fileName.IndexOf('') > -1) { fileName = fileName.Substring(fileName.LastIndexOf('') + 1); } else if (fileName.IndexOf('/') > -1) { fileName = fileName.Substring(fileName.LastIndexOf('/') + 1); } //上传的目录 string uploadDir = "~/files/"; //上传的路径 string uploadPath = uploadDir + Guid.NewGuid() + fileName; //保存文件 file.SaveAs(Server.MapPath(uploadPath)); //下面这句代码缺少的话，上传成功后上传队列的显示不会自动消失 Response.Write("1"); } catch { Response.Write("0"); } } } |
好了，这个插件介绍到这里就结束了，希望对大家有所帮助。
uploadify插件可选参数的详细介绍
以下是可选项的参数说明：（红色的属性代表常用的)
| 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. |
