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