• asp.net mvc 2.o 中使用JQuery.uploadify


    From:http://www.cnblogs.com/strugglesMen/archive/2011/07/01/2095916.html

    官方网站
    http://www.uploadify.com/
    插件演示地址:
    http://www.uploadify.com/demos/
    插件下载地址:
    http://www.uploadify.com/download/
    插件使用文档:
    http://www.uploadify.com/documentation/

    下载下来的文件列表

    文件说明:

    con:文件夹actionscript脚本源码

    cancel.png:关闭图片

    jquery.uploadify.v2.1.4.js:关键文件

    jquery.uploadify.v2.1.4.min.js:压缩文件

    swfobject.js:用来处理flash,SWFObject是一个用于在HTML中方面插入Adobe Flash媒体资源(*.swf文件)的独立、敏捷的JavaScript模块

    uploadify.css:样式文件

    uploadify.fla :flash界面源码文件

    uploadify.swf:flash按钮文件

    属性

                   // uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值:uploadify.swf。

          uploader : 'http://www.cnblogs.com/Scripts/jq.uploadify/uploadify.swf',  
                    script: '/Uploadify/UploadifyFile', //后台处理程序的相对路径 。默认值:uploadify.php 
                    scriptData: { 'id': "4", 'type': "all" }, //后台程序处理参数
                    cancelImg: 'http://www.cnblogs.com/Scripts/jq.uploadify/cancel.png', //选择文件到文件队列中后的每一个文件上的关闭按钮图标
                    folder: 'file/image', //上传文件存放的目录,
                    queueID: 'fileQueue', //文件队列的ID,该ID与存放文件队列的div的ID一致。
                    auto: true, //设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 
                    multi: true, //true:上传多个文件,false:只能上传一个文件
                    fileDataName: "file1", //在服务器处理程序中根据该名字来取上传文件的数据(获取客户端文件集合的name名称,即,Reques.Flies["FileData"])。默认为Filedata 
                    method: 'Post', //提交方式Post 或Get 默认为Post 
                   fileDesc: '请选择*.*格式', //这个属性值必须设置fileExt属性后才有效,
                    fileExt: '*.doc;*.pdf;*.rar;*.*', //设置可以选择的文件的类型,默认为所有类型文件。注:一种类型文件"*.jpg",多种类型文件中间使用分号隔开"*.jpg;*.gif",所有文件,"*.*",或者去掉此参数,因为默认为所有类型的文件
                    sizeLimit: 10485760, //上传文件的大小限制 。单位字节,10485760=10mb
                    buttonText: 'select', //浏览按钮的文本,默认值:BROWSE 。 
                    queueSizeLimit: 2, //当允许多文件上传时,设置选择文件的个数,默认值:999。设置此值需设置'multi': true,
                    simUploadLimit: 2,//允许同时上传的个数 默认值:1 。 
                    buttonImg: 'http://www.cnblogs.com/Scripts/jq.uploadify/select.gif', //浏览按钮的图片的路径 。 
                    rollover:true,//值为true和false,设置为true时当鼠标移到浏览按钮上时有反转效果。 
                    scriptAccess : 'always',//flash脚本文件的访问模式,如果在本地测试设置为always,默认值:sameDomain  
                    checkScript:'data',// :用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径 
                    '110', //设置浏览按钮的宽度 ,默认值:110。 
                    height: '25', //设置浏览按钮的高度 ,默认值:30。
                    wmode : 设置该项为transparent 可以使浏览按钮的flash背景文件透明,并且flash文件会被置为页面的最高层。 默认值:opaque 。  
                    hideButton: true,//隐藏按钮

    事件:

    //onInit:初始化操作
                    onInit: function () {
                        $("#oninit").text("初始化中..");
                        $("#onselect").empty();
                        $("#onselectonce").empty();
                        $("#oncancel").empty();
                        $("#onclearqueue").empty();
                        $("#onQueueFull").empty();
                    }


                    /*
                    onSelect :选择文件时触发,该函数有三个参数
                    event:事件对象。 
                    queueID:文件的唯一标识,由6为随机字符组成。 
                    fileObj:选择的文件对象,有name、size、creationDate、modificationDate、type 5个属性。 
                    */
                    onSelect: function (e, queueId, fileObj) {
                    },


                    /*
                    onSelectOnce :在单文件或多文件上传时,选择文件时触发。该函数有两个参数event,data,data对象有以下几个属性:
                    fileCount:选择文件的总数。
                    filesSelected:同时选择文件的个数,如果一次选择了3个文件该属性值为3。
                    filesReplaced:如果文件队列中已经存在A和B两个文件,再次选择文件时又选择了A和B,该属性值为2。
                    allBytesTotal:所有选择的文件的总大小。
                    */
                    onSelectOnce: function (event, data) {
                    }


                    /*
                    onCancel : 当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、data四个参数,前三个参数同onSelect 中的三个参数,data对象有两个属性fileCount和allBytesTotal。
                    fileCount:取消一个文件后,文件队列中剩余文件的个数。
                    allBytesTotal:取消一个文件后,文件队列中剩余文件的大小。
                    */
                    onCancel: function (event, queueId, fileObj, data) {
                    }

                    //onClearQueue :当调用函数fileUploadClearQueue时触发。有event和data两个参数,同onCancel 中的两个对应参数。
                    onClearQueue: function (event, data) {
                    }

                    //onQueueFull :当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发。该函数有两个参数event和queueSizeLimit。
                    onQueueFull: function (event, queueSizeLimit) {
                    }

                    /*
                    onError :当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数,其中前三个参数同上,errorObj对象有type和info两个属性。
                    type:错误的类型,有三种‘HTTP’, ‘IO’, or ‘Security’
                    info:错误的描述
                    */
                    onError: function (event, queueId, fileObj, errorObj) {
                    }

                    /*
                    onOpen :点击上传时触发,如果auto设置为true则是选择文件时触发,如果有多个文件上传则遍历整个文件队列。该函数有event、queueId、fileObj三个参数,参数的解释同上。
                    */
                    'onOpen': function (event, queueId, fileObj) {
                    }

                    /*
                    onProgress :点击上传时触发,如果auto设置为true则是选择文件时触发,如果有多个文件上传则遍历整个文件队列,在onOpen之后触发。该函数有 event、queueId、fileObj、data四个参数,前三个参数的解释同上。data对象有四个属性percentage、 bytesLoaded、allBytesLoaded、speed:
                    percentage:当前完成的百分比
                    bytesLoaded:当前上传的大小
                    allBytesLoaded:文件队列中已经上传完的大小
                    speed:上传速率 kb/s
                    */
                    'onProgress': function (event, queueId, fileObj, data) {
                    }

                    /*当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数,其中前三个参数同上,errorObj对象有type和info两个属性。
                    fileObj:name、size、creationDate、modificationDate、type 5个属性
                    type:错误的类型,有三种‘HTTP’, ‘IO’, or ‘Security’
                    info:错误的描述
                    */
                    'onComplete': function (event, queueId, fileObj, response, data) {
                    }


                    /*
                    onAllComplete:文件队列中所有的文件上传完成后触发。该函数有event和data两个参数,data有四个属性,分别为:
                    filesUploaded :上传的所有文件个数。
                    errors :出现错误的个数。
                    allBytesLoaded :所有上传文件的总大小。
                    speed :平均上传速率 kb/s
                    */
                    onAllComplete: function (event, data) {
                    }

    方法
    .uploadify():创建Uploadify的实例,关键的方法
    .uploadifyCancel():从上传队列中移除一个文件
    .uploadifyClearQueue():清空上传队列
    .uploadifySettings():修改Uploadify实例的属性
    .uploadifyUpload():触法文件上传

    最简单的用法,也是默认的设置

    One.aspx

     1 <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
     2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     3 <html xmlns="http://www.w3.org/1999/xhtml" >
     4 <head id="Head1" runat="server">
     5     <title></title>
     6     <link href="http://www.cnblogs.com/Scripts/jq.uploadify/uploadify.css" rel="stylesheet" type="text/css" />
     7     <script src="http://www.cnblogs.com/Scripts/jq.uploadify/swfobject.js" type="text/javascript"></script>
     8     <script src="http://www.cnblogs.com/Scripts/jq.uploadify/jquery-1.4.2.min.js" type="text/javascript"></script>
     9     <script src="http://www.cnblogs.com/Scripts/jq.uploadify/jquery.uploadify.v2.1.4.min.js" type="text/javascript"></script>
    10     <style type="text/css">
    11     </style>
    12 </head>
    13 <body>
    14 <form id="form1" action="" >
    15         <input type="file" name="uploadify" id="uploadify" />
    16         <a href="javascript:$('#uploadify').uploadifyUpload()">上传</a> <a href="javascript:$('#uploadify').uploadifyClearQueue()"> 取消上传</a>&nbsp;&nbsp;
    17         <div id="fileQueue"></div>
    18 </form>
    19     <script type="text/javascript">
    20         $(document).ready(function () {
    21             $("#uploadify").uploadify({
    22                 'uploader': 'http://www.cnblogs.com/Scripts/jq.uploadify/uploadify.swf', // uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值:uploadify.swf。 
    23                 'script': '/Uploadify/UploadifyFile', //后台处理程序的相对路径 。默认值:uploadify.php 
    24                 'scriptData': { 'id': "4", 'type': "all" }, //后台程序处理参数
    25                 'cancelImg': 'http://www.cnblogs.com/Scripts/jq.uploadify/cancel.png', //选择文件到文件队列中后的每一个文件上的关闭按钮图标
    26                 'queueID': 'fileQueue', //文件队列的ID,该ID与存放文件队列的div的ID一致。
    27                 'fileDataName': "file1" //在服务器处理程序中根据该名字来取上传文件的数据(获取客户端文件集合的name名称,即,Reques.Flies["FileData"])。默认为Filedata 
    28             });
    29         });
    30     </script>
    31 </body>
    32 </html>
    View Code

    .NET方法

     1 [HttpPost]
     2         public ActionResult UploadifyFile(string id,string type)
     3         {
     4 
     5             HttpPostedFileBase supplierVideo = Request.Files["file1"];
     6             if (supplierVideo == null)
     7                 return Json(new{message="0",url=""});
     8             try {
     9                 //项目根目录的物理路径
    10                 string serverPath = AppDomain.CurrentDomain.BaseDirectory + "File\";
    11                 //文件名称
    12                 var filename = supplierVideo.FileName;
    13                 //文件及物理路径
    14                 var filepath = serverPath + filename;
    15                 if (!System.IO.Directory.Exists(serverPath))
    16                 {
    17                     System.IO.Directory.CreateDirectory(serverPath);
    18                 }
    19                 supplierVideo.SaveAs(filepath);
    20                 return Json(new { message = "1", url = "" });
    21             }
    22             catch(Exception e){
    23                 return Json(new { message = "0", url = "" });
    24             }
    25             
    26         }
    View Code

    单文件的详细一点的用法

      1 <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
      2 
      3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      4 
      5 <html xmlns="http://www.w3.org/1999/xhtml" >
      6 <head id="Head1" runat="server">
      7     <title>单文件上传详细用法</title>
      8     <link href="http://www.cnblogs.com/Scripts/jq.uploadify/uploadify.css" rel="stylesheet" type="text/css" />
      9     <script src="http://www.cnblogs.com/Scripts/jq.uploadify/swfobject.js" type="text/javascript"></script>
     10     <script src="http://www.cnblogs.com/Scripts/jq.uploadify/jquery-1.4.2.min.js" type="text/javascript"></script>
     11     <script src="http://www.cnblogs.com/Scripts/jq.uploadify/jquery.uploadify.v2.1.4.min.js" type="text/javascript"></script>
     12     <style type="text/css">
     13     </style>
     14     
     15 </head>
     16 <body>
     17 
     18 <form id="form1" action="" >
     19         <input type="file" name="uploadify" id="uploadify" />
     20         <a href="javascript:$('#uploadify').uploadifyClearQueue()"> 取消上传</a>&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="清空所有信息" onclick="ClearErrorInfo();" />
     21         <div id="fileQueue"></div>
     22          <br/> <br/> <br/>
     23             <ul>
     24             <li>onSelect[选择]:</li>
     25             <li><span id="onselect" style="color:Blue;"></span></li>
     26             <li>onCancel[取消上传]:</li>
     27             <li><span id="oncancel" style="color:Blue;"></span></li>
     28             <li>onError[异常]:</li>
     29             <li><span id="onerror" style="color:Blue;"></span></li>
     30             <li>onProgress[上传进度]:</li>
     31             <li><span id="onprogress" style="color:Blue;"></span></li>
     32              <li>onComplete[上传状态]:</li>
     33             <li><span id="oncomplete" style="color:Blue;"></span></li>
     34             </ul>
     35 </form>
     36     <script type="text/javascript">
     37         $(document).ready(function () {
     38             $("#uploadify").uploadify({
     39                 'uploader': 'http://www.cnblogs.com/Scripts/jq.uploadify/uploadify.swf',
     40                 'script': '/Uploadify/UploadifyFile',
     41                 'scriptData': { 'id': "4", 'type': "all" },
     42                 'cancelImg': 'http://www.cnblogs.com/Scripts/jq.uploadify/cancel.png',
     43                 'queueID': 'fileQueue',
     44                 'fileDataName': "file1",
     45 
     46                 'auto': true,//设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 
     47                 'fileDesc': '请选择rar,pdf格式', //这个属性值必须设置fileExt属性后才有效,
     48                 'fileExt': '*.rar;*.pdf;*.rmvb', //设置可以选择的文件的类型,格式如:'*.doc;*.pdf;*.rar'
     49                 'sizeLimit': 104550400, //上传文件的大小限制 。单位字节,104550400=100mb
     50                 'onSelect': function (e, queueId, fileObj) {
     51                     var html = '<b>您选择的文件信息!</b><br/>文件的唯一标识:' + queueId + '<br/>' +
     52                     '文件名称:' + fileObj.name + '<br/>' +
     53                     '文件大小:' + fileObj.size + '<br/>' +
     54                     '文件类型:' + fileObj.type + '<br/>';
     55                     $("#onselect").empty().append(html);
     56                     //关闭所有的队列
     57                     $('#uploadify').uploadifyClearQueue();
     58                 },
     59                 'onCancel': function (event, queueId, fileObj, data) {
     60                     var html = '<b>您已取消上传操作!</b> <br/>关闭的文件queueId(文件的唯一标识):' + queueId +
     61                     '<br/>取消一个后队列中的文件个数:' + data.fileCount +
     62                     '<br/>取消一个后队列中剩余文件的大小:' + data.allBytesTotal;
     63                     $("#oncancel").empty().append(html);
     64                 },
     65                 'onError': function (event, queueId, fileObj, errorObj) {
     66 
     67                     var html = '错误类型:'+errorObj.type+'<br/>'+'错误信息:'+errorObj.info;
     68                     $("#onerror").empty().append(html);
     69                 },
     70                 'onProgress': function (event, queueId, fileObj, data) {
     71                     var html = '当前完成的百分比:' + data.percentage +
     72                     '<br/>当前上传的大小:' + data.bytesLoaded +
     73                     '<br/>文件队列中已经上传完的大小:' + data.allBytesLoaded +
     74                     '<br/>上传速率:' + data.speed;
     75                     $("#onprogress").empty().append(html);
     76                 },
     77                 'onComplete': function (event, queueId, fileObj, response, data) {
     78                     var result = eval('(' + response + ')');
     79                     //alert(result)
     80                     //上传完成后的操作
     81                     if (result.message == 1) {
     82                         html = "上传成功";
     83                     }
     84                     if (result.message == 2) {
     85                         html = "上传失败";
     86                     }
     87                     $("#oncomplete").empty().append(html);
     88                 }
     89             });
     90         });
     91 
     92         function ClearErrorInfo(){
     93             $("#onselect").empty();
     94             $("#oncancel").empty();
     95             $("#onerror").empty();
     96             $("#onprogress").empty();
     97             $("#oncomplete").empty();
     98         }
     99     </script>
    100 </body>
    101 </html>
    View Code

     

    后台代码是一样的

    最简单的多文件上传

    只需要在uploadify方法加上multi参数

    'multi': true //true:上传多个文件,false:只能上传一个文件,默认为false

    多文件上传

      1 <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
      2 
      3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      4 
      5 <html xmlns="http://www.w3.org/1999/xhtml" >
      6 <head id="Head1" runat="server">
      7     <title>单文件上传详细用法</title>
      8     <link href="http://www.cnblogs.com/Scripts/jq.uploadify/uploadify.css" rel="stylesheet" type="text/css" />
      9     <script src="http://www.cnblogs.com/Scripts/jq.uploadify/swfobject.js" type="text/javascript"></script>
     10     <script src="http://www.cnblogs.com/Scripts/jq.uploadify/jquery-1.4.2.min.js" type="text/javascript"></script>
     11     <script src="http://www.cnblogs.com/Scripts/jq.uploadify/jquery.uploadify.v2.1.4.min.js" type="text/javascript"></script>
     12     <style type="text/css">
     13     </style>
     14     
     15 
     16 </head>
     17 <body>
     18 
     19 <form id="form1" action="" >
     20         <input type="file" name="uploadify" id="uploadify" />
     21         <a href="javascript:$('#uploadify').uploadifyClearQueue()"> 取消上传</a>&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="清空所有信息" onclick="ClearErrorInfo();" />
     22         <div id="fileQueue"></div>
     23          <br/> <br/> <br/>
     24             <ul>
     25             <li>onSelectOnce[选择多文件]:</li>
     26             <li><span id="onselectOnce" style="color:Blue;"></span></li>
     27 
     28             <li>onCancel[取消上传]:</li>
     29             <li><span id="oncancel" style="color:Blue;"></span></li>
     30 
     31             <li>onClearQueue[取消所有]:</li>
     32             <li><span id="onclearqueue" style="color:Blue;"></span></li>
     33 
     34             <li>onQueueFull[选择文件超出个数]:</li>
     35             <li><span id="onqueuefull" style="color:Blue;"></span></li>
     36 
     37             <li>onError[异常]:</li>
     38             <li><span id="onerror" style="color:Blue;"></span></li>
     39 
     40             <li>onProgress[上传进度]:</li>
     41             <li><span id="onprogress" style="color:Blue;"></span></li>
     42 
     43              <li>onComplete[单个文件上传状态]:</li>
     44             <li><span id="oncomplete" style="color:Blue;"></span></li>
     45 
     46             <li>onAllComplete[全部上传后触发]:</li>
     47             <li><span id="onallcomplete" style="color:Blue;"></span></li>
     48             </ul>
     49 
     50 
     51 </form>
     52 
     53 
     54     <script type="text/javascript">
     55         $(document).ready(function () {
     56             $("#uploadify").uploadify({
     57                 'uploader': 'http://www.cnblogs.com/Scripts/jq.uploadify/uploadify.swf',
     58                 'script': '/Uploadify/UploadifyFile',
     59                 'scriptData': { 'id': "4", 'type': "all" },
     60                 'cancelImg': 'http://www.cnblogs.com/Scripts/jq.uploadify/cancel.png',
     61                 'queueID': 'fileQueue',
     62                 'fileDataName': "file1",
     63 
     64                 'multi': true, //true:上传多个文件,false:只能上传一个文件
     65                 'auto': true, //设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 
     66                 'fileDesc': '请选择rar,pdf格式', //这个属性值必须设置fileExt属性后才有效,
     67                 'fileExt': '*.rar;*.pdf;*.rmvb', //设置可以选择的文件的类型,格式如:'*.doc;*.pdf;*.rar'
     68                 'sizeLimit': 104550400, //上传文件的大小限制 。单位字节,104550400=100mb
     69                 'queueSizeLimit': 5, //选择上传文件个数
     70                 'onSelectOnce': function (event, data) {
     71                     var html = '选择文件的总数:' + data.fileCount +
     72                     '<br/>同时选择文件的个数:' + data.filesSelected +
     73                     '<br/>不重复个数:' + data.filesReplaced +
     74                     '<br/>所有选择的文件的总大小:' + data.allBytesTotal +
     75                     $("#onselectonce").empty().append(html);
     76                 },
     77 
     78                 'onCancel': function (event, queueId, fileObj, data) {
     79                     var html = '<b>您已取消上传操作!</b> <br/>关闭的文件queueId(文件的唯一标识):' + queueId +
     80                     '<br/>取消一个后队列中的文件个数:' + data.fileCount +
     81                     '<br/>取消一个后队列中剩余文件的大小:' + data.allBytesTotal;
     82                     $("#oncancel").empty().append(html);
     83                 },
     84                 'onClearQueue': function (event, data) {
     85                     var html = '<br/>取消后队列中的文件个数:' + data.fileCount +
     86                     '<br/>取消后队列中剩余文件的大小:' + data.allBytesTotal;
     87                     $("#onclearqueue").empty().append(html);
     88                 },
     89                 'onQueueFull': function (event, queueSizeLimit) {
     90                     var html = 'event:' + event +
     91                     '<br/>data.queueSizeLimit(取消后队列中剩余文件的大小):' + queueSizeLimit;
     92                     $("#onqueuefull").empty().append(html);
     93                 },
     94                 'onError': function (event, queueId, fileObj, errorObj) {
     95 
     96                     var html = queueId+'文件<br/>错误类型:' + errorObj.type + '<br/>' + '错误信息:' + errorObj.info+'<br/>';
     97                     $("#onerror").append(html);
     98                 },
     99                 'onProgress': function (event, queueId, fileObj, data) {
    100                     var html = '当前完成的百分比:' + data.percentage +
    101                     '<br/>当前上传的大小:' + data.bytesLoaded +
    102                     '<br/>文件队列中已经上传完的大小:' + data.allBytesLoaded +
    103                     '<br/>上传速率:' + data.speed + '||' + event.queueId;
    104                     $("#onprogress").empty().append(html);
    105                 },
    106                 'onComplete': function (event, queueId, fileObj, response, data) {
    107                     var result = eval('(' + response + ')');
    108                     //上传完成后的操作
    109                     if (result.message == 1) {
    110                         html = '文件' + queueId + '上传成功,';
    111                     }
    112                     if (result.message == 2) {
    113                         html = '文件' + queueId + '上传失败,';
    114                     }
    115                     $("#oncomplete").append(html);
    116                 },
    117                 'onAllComplete': function (event, data) {
    118                     var html = '上传的所有文件个数:' + data.filesUploaded +
    119                     '<br/>出现错误的个数:' + data.errors +
    120                     '<br/>allBytesLoaded:' + data.allBytesLoaded +
    121                     '<br/>平均上传速率:' + data.speed + 'kb/s';
    122                 $("#onallcomplete").empty().append(html);
    123                 }
    124             });
    125         });
    126 
    127         function ClearErrorInfo() {
    128             $("#onselect").empty();
    129             $("#oncancel").empty();
    130             $("#onerror").empty();
    131             $("#onprogress").empty();
    132             $("#oncomplete").empty();
    133         }
    134     </script>
    135 </body>
    136 </html>
    View Code

     

    详细属性,事件,方法

    属性

    属性名

    类型

    说明

    auto

    boolean

    添加到队列后自动上传

    buttonImg

    string

    浏览按钮的背景图片

    buttonText

    string

    浏览按钮的显示文字

    cancelImg

    string

    取消上传按钮的图片

    checkScript

    string

    服务端用来检查文件是否重名的脚本

    displayData

    string

    上传时显示的提示(percentage百分比/speed速度)

    expressInstall

    string

    安装swf的文件(expressInstall.swf)路径

    fileDataName

    string

    重定义的input的名称(后台)

    fileDesc

    string

    文件打开对话框中的文件类型描述

    fileExt

    string

    可允许上传的文件类型

    folder

    string

    文件存储的文件夹

    height

    integer

    浏览按钮的高度

    hideButton

    boolean

    是否隐藏浏览按钮

    method

    string

    表单提交方式(post/get)

    multi

    boolean

    是否允许上传多个文件

    queueID

    string

    上传队列的元素的ID

    queueSizeLimit

    integer

    上传队列大小

    removeCompleted

    boolean

    完成上传时是否自动删除

    rollover

    boolean

    当鼠标移上时产生特效

    script

    string

    上传表单提交的目标脚本

    scriptAccess

    string

    swf的文件地址

    scriptData

    JSON

    提交给后台的附加信息

    simUploadLimit

    integer

    同时可上传的文件实例数

    sizeLimit

    integer

    每文件的最大大小

    uploader

    string

    uploadify上传的swf文件路径

    width

    integer

    浏览按钮的宽度

    wmode

    string

    flash文件的wmode模式(transparent)

     事件:

    事件名

    参数

    说明

    onAllComplete

    function(event,data)

    当所有文件上传完毕时触发

    onCancel

    function(event,ID,fileObj,data)

    当某文件被取消上传时触发

    onCheck

    function()

    当开始上传时检查是否重名

    onClearQueue

    function(event)

    当执行uploadifyClearQueue()后执行

    onComplete

    function(event, ID, fileObj, response, data)

    当某文件上传完毕时触发

    onError

    function(event,ID,fileObj,errorObj)

    当上传时有错误返回时触发

    onInit

    function()

    当uploadify实例加载完毕时触发

    onOpen

    function(event,ID,fileObj)

    当某文件开始上传时触发

    onProgress

    function(event,ID,fileObj,data)

    当某文件上传进度改变时触发

    onQueueFull

    function(event,queueSizeLimit)

    当上传队列达到限制时触发

    onSelect

    function(event,ID,fileObj)

    每个文件被添加到上传队列时触发

    onSelectOnce

    function(event,data)

    一次文件被添加到上传队列时触发

    onSWFReady

    function()

    当flash加载完毕时触发

    方法:

     

    方法名

    说明

    .uploadify()

    创建Uploadify的实例

    .uploadifyCancel()

    从上传队列中移除一个文件

    .uploadifyClearQueue()

    清空上传队列

    .uploadifySettings()

    修改Uploadify实例的属性

    .uploadifyUpload()

    触法文件上传

  • 相关阅读:
    cmd 进入不同的驱动盘及上下级目录
    子网/ip/子网掩码
    虚拟化技术与"云"
    OSI 7层模型
    第一天的CI笔记
    在本地Apache服务器配置虚拟主机站点
    phpmailer 发送邮件
    mysql 中执行的 sql 注意字段之间的反向引号和单引号
    手动部署LNMT(Nginx+Tomcat)并实现Nginx反向代理Tomcat
    JS 创建元素的三种方法
  • 原文地址:https://www.cnblogs.com/wangjiahong/p/4502440.html
Copyright © 2020-2023  润新知