下载 现在有两个版本了,我此次使用的依然是Flash版本的,虽然现在绝大部分浏览器都兼容HTMKL5,目前位置,除了做手机项目外,一般我们项目中不允许使用HTML5标签。
属性介绍(Options)
auto:是否自动上传,默认值true。如果设置为false,上传文件将会被放入到一个队列中,需要调用upload方法才会将队列中的文件上传到服务器,具体参见upload方法介绍。
1 $(function () { 2 $("#upload").uploadify({ 3 auto: false, 4 swf: '/uploadify/uploadify.swf', 5 uploader: '/ashx/upload.ashx' 6 }); 7 });
效果图:
注意:不调用upload方法,将会永久在队列中。不会自动提交到服务器。
buttonClass:按钮的样式,默认值(Empty String)。想要设置样式还是很麻烦的,首先你要覆盖掉原有的样式,原有样式在uploadify.css(你也可以对次css文件进行精简),这个属性一般不怎么用,项目中让美工切button图片,直接赋值给buttonImage。这里只给出一个使用的例子:
1 .some{ 2 background-color:Red; 3 background-image:none; 4 }
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="JQ_uploadify.Demo" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head runat="server"> 6 <title></title> 7 <link href="/uploadify/uploadify.css" rel="stylesheet" type="text/css" /> 8 <link href="/css/css.css" rel="stylesheet" type="text/css" /> 9 <script src="/js/jquery-1.8.3.js" type="text/javascript"></script> 10 <script src="/uploadify/jquery.uploadify.js" type="text/javascript"></script> 11 <script type="text/javascript"> 12 $(function () { 13 $("#upload").uploadify({ 14 'buttonText': '神马', 15 'buttonClass': 'some', 16 'buttonImage': null, 17 'swf': '/uploadify/uploadify.swf', 18 'uploader': '/ashx/upload.ashx' 19 }); 20 }); 21 </script> 22 </head> 23 <body> 24 <form id="form1" runat="server"> 25 <div> 26 <input type="file" name="upload" value="上传" id="upload" /> 27 </div> 28 </form> 29 </body> 30 </html>
效果:
buttonCursor:鼠标悬停在按钮上的样式,默认值hand(手型),可设置为arrow(箭头)。
buttonImage:按钮的图片路径 ,默认值null。这里需要强调一下,项目中不要把uploadify.css原封不动的引用,因为里面有默认样式。
最外层的div自带uploadify样式,可能会导致你新加的样式无效。
buttonText:按钮的文本,默认值'SELECT FILES'。
checkExisting:检测文件是否已经存在,提示是否执行覆盖操作。默认值false。
1 $(function () { 2 $("#upload").uploadify({ 3 'buttonText': '神马', 4 'checkExisting': '/ashx/checkExisting.ashx', 5 'swf': '/uploadify/uploadify.swf', 6 'uploader': '/ashx/upload.ashx', 7 onUploadError: function (data) { alert(data); } 8 }); 9 });
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 6 namespace JQ_uploadify.ashx 7 { 8 /// <summary> 9 /// checkExisting 的摘要说明 10 /// </summary> 11 public class checkExisting : IHttpHandler 12 { 13 14 public void ProcessRequest(HttpContext context) 15 { 16 context.Response.ContentType = "text/plain"; 17 context.Response.Write("1"); 18 } 19 20 public bool IsReusable 21 { 22 get 23 { 24 return false; 25 } 26 } 27 } 28 }
debug:调试必备,可以看到上传的详细信息。
---SWFUpload Instance Info--- Version: 2.2.0 2009-03-25 Movie Name: SWFUpload_0 Settings: upload_url: /uploadify/uploadify.php flash_url: /uploadify/uploadify.swf?preventswfcaching=1388978314864 use_query_string: false requeue_on_error: false http_success: assume_success_timeout: 30 file_post_name: Filedata post_params: [object Object] file_types: *.* file_types_description: All Files file_size_limit: 0 file_upload_limit: 0 file_queue_limit: 999 debug: true prevent_swf_caching: true button_placeholder_id: file_upload button_placeholder: Not Set button_image_url: /documentation/uploadify/debug/ button_ 120 button_height: 30 button_text: button_text_style: color: #000000; font-size: 16pt; button_text_top_padding: 0 button_text_left_padding: 0 button_action: -110 button_disabled: false custom_settings: [object Object] Event Handlers: swfupload_loaded_handler assigned: false file_dialog_start_handler assigned: true file_queued_handler assigned: true file_queue_error_handler assigned: true upload_start_handler assigned: true upload_progress_handler assigned: true upload_error_handler assigned: true upload_success_handler assigned: true upload_complete_handler assigned: true debug_handler assigned: true SWF DEBUG: SWFUpload Init Complete SWF DEBUG: SWF DEBUG: ----- SWF DEBUG OUTPUT ---- SWF DEBUG: Build Number: SWFUPLOAD 2.2.0 SWF DEBUG: movieName: SWFUpload_0 SWF DEBUG: Upload URL: /uploadify/uploadify.php SWF DEBUG: File Types String: *.* SWF DEBUG: Parsed File Types: SWF DEBUG: HTTP Success: 0 SWF DEBUG: File Types Description: All Files (*.*) SWF DEBUG: File Size Limit: 0 bytes SWF DEBUG: File Upload Limit: 0 SWF DEBUG: File Queue Limit: 999 SWF DEBUG: Post Params: SWF DEBUG: ----- END SWF DEBUG OUTPUT ---- SWF DEBUG: SWF DEBUG: Event: fileDialogStart : Browsing files. Multi Select. Allowed file types: *.* SWF DEBUG: Select Handler: Received the files selected from the dialog. Processing the file list... SWF DEBUG: Event: fileQueued : File ID: SWFUpload_0_0 SWF DEBUG: Event: fileDialogComplete : Finished processing selected files. Files selected: 1. Files Queued: 1 SWF DEBUG: StartUpload: First file in queue SWF DEBUG: Event: uploadStart : File ID: SWFUpload_0_0 SWF DEBUG: ReturnUploadStart(): File accepted by startUpload event and readied for upload. Starting upload to /uploadify/uploadify.php for File ID: SWFUpload_0_0 SWF DEBUG: Event: uploadProgress (OPEN): File ID: SWFUpload_0_0 SWF DEBUG: Event: uploadProgress: File ID: SWFUpload_0_0. Bytes: 32768. Total: 41499 SWF DEBUG: Event: uploadProgress: File ID: SWFUpload_0_0. Bytes: 41499. Total: 41499 SWF DEBUG: Event: uploadSuccess: File ID: SWFUpload_0_0 Response Received: true Data: 1 SWF DEBUG: Event: uploadComplete : Upload cycle complete.
fileObjName:设置一个名字,在服务器端根据该名字来取上传文件的数据。默认值Filedata,老版本fileDataName
fileSizeLimit:上传文件的大小限制(HTML也会对上传文件大小进行限制,好像是4M),默认单位KB,接受单位:B、KB、MB、GB。
fileTypeDesc:可选的描述文件。这个字符串出现在浏览文件对话框的文件类型下拉列表中。
fileTypeExts:允许扩展的列表,可以上传。手动输入文件名称可以绕过这种级别的安全,所以你应该检查你的服务器端脚本文件类型。分号分隔的多个扩展应该予以运行(即"*.jpg;*.png;*.gif")。这只是对上传文件的类型做了限制,服务器端必须进行校验。
formData:附加参数的提交方式,json格式提交,后台request获取。如果是想动态提交,可以在onUploadStart事件对应的方法中附加参数。
1 $(function () { 2 $("#upload").uploadify({ 3 'formData': { 'someKey': 'someValue', 'someOtherKey': 1 }, 4 'swf': '/uploadify/uploadify.swf', 5 'uploader': '/ashx/upload.ashx', 6 'onUploadStart': function (file) { 7 $("#upload").uploadify("settings", "someOtherKey", 2); 8 } 9 }); 10 });
1 public void ProcessRequest(HttpContext context) 2 { 3 context.Response.ContentType = "text/plain"; 4 5 string path = context.Request["upload"].ToString(); 6 7 string s1 = context.Request["someKey"].ToString(); 8 string s2 = context.Request["someOtherKey"].ToString(); 9 string s3 = context.Request["someOtherKey"].ToString(); 10 11 12 DirectoryInfo dir = new DirectoryInfo(path); 13 14 context.Response.Write(dir.FullName); 15 }
height:按钮高度,默认值30,单位pixel(像素)。
method:文件上传的提交方式,默认值'post',可选值'post'或'get'。
multi:是否允许多文件同时上传,默认值true。
progressData:上传队列(多个进度条)显示的样式,默认值'percentage'(百分比),可选值'percentage'或'speed'。
queueID:上传队列的ID,如果此ID对应某个div或span(通常这样用),上传队列(多个进度条)将会显示在ID对应的div或span中。如果不设置,将会动态生成。
queueSizeLimit:设置最大同时放入队列数量。这不能限制上传文件的总数量。如果想限制上传文件的总数量,请用uploadLimit。如果超出设置值将会触发onSelectError事件。
removeCompleted:从队列中移除已完成上传的文件,默认值true。
removeTimeout:设置延时执行'removeCompleted'的时间,默认值3,单位'seconds'(秒)。
requeueErrors:文件上传失败,是否重新执行上传,默认值false。
successTimeout:设置服务器的响应时间,如果超出设置时间,SWF将假象为上传成功。
swf:文件uploadify.swf的路径。可以设置为根路径,也可以设置为相对路径。
uploader:服务器端处理文件的路径。可以设置为根路径,也可以设置为相对路径。
uploadLimit:设置最大上传数量。达到或超出设置值将会触发onUploadError事件。
width:按钮宽度,默认值120,单位pixel(像素)。(注意最后不要加单位)