• 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_             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(像素)。(注意最后不要加单位)

    本文版权归作者和博客园共有,来源网址:http://www.cnblogs.com/tq1226112215/
    欢迎各位转载,但是未经作者本人同意,转载文章之后必须在文章页面明显位置给出作者和原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    scala-class
    uva-10422-骑士-搜索题
    HDU 5724
    HDU 5728
    CodeForces 414B
    CodeForces 698A
    Codeforces Round #363 (Div. 2)
    BestCoder 2nd Anniversary 1001 Oracle
    BestCoder 2nd Anniversary 1002 Arrange
    HDU 4798
  • 原文地址:https://www.cnblogs.com/tq1226112215/p/3506928.html
Copyright © 2020-2023  润新知