不鸣则已

海阔凭鱼跃，天高任鸟飞！
首页 新随笔 联系 订阅 管理
JQuery上传插件uploadify整理（Options）

下载  现在有两个版本了，我此次使用的依然是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>
buttonClass

效果：

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_width:             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.
SWFUpload Instance Info

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（像素）。（注意最后不要加单位）

posted on 2014-01-06 11:50  唐群  阅读(853)  评论(0)  编辑  收藏  举报