uploadify上传控件使用

uploadify属性就说明 
<div>
uploadify属性就说明

 属性名称

类型

说明

 auto

 bool

  设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传

 buttonImg

 string

  浏览按钮的图片的路径（即设置按钮背景图片）
 buttonText

 string

   浏览按钮的文本，默认值：BROWSE
 cancelImg

 string

  选择文件到文件队列中后的每一个文件上的关闭按钮图标
 checkScript

 string

  用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径
 displayData

 string

  将该类型数据显示在上传队列中。比如：'displayData' : 'speed'
 expressInstall

 string

 该expressInstall选项指向闪存expressInstall.swf文件，利用该系统安装Flash，如果它不存在。
示例：'expressInstall' : '/uploadify/expressInstall.swf'
 fileDataName

 string

  设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata
 fileDesc

 string

 这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileDesc为“请选择rar doc pdf文件”，如图：

示例：'fileDesc':  '文件格式只允许(.JPG, .GIF, .PNG)'
 fileExt

 string

  设置可以选择的文件的类型，格式如：'*.doc;*.pdf;*.rar' 。示例：'fileExt': '*.jpg;*.gif;*.png',
 folder

 string

  上传文件存放的目录
 height

 int

  设置浏览按钮的高度 ，默认值：30
 hideButton

 bool

  设置为true则隐藏浏览按钮的图片,默认为false
 method

 string

  提交方式Post 或Get ，默认为Post
 multi

 bool

  设置为true时可以上传多个文件，默认为false
 queueID

 string

  文件队列的ID，该ID与存放文件队列的div的ID一致
 queueSizeLimit

 string

  当允许多文件生成时，设置选择文件的个数，默认值：999 。
 removeCompleted

 bool

  默认为true，每个队列完成之后是否删除队列信息div
 rollover

 bool

  值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果
 script

 string

  后台处理程序的相对路径 。示例：'script': 'AshxAllEvent/UploadHandler.ashx',
 scriptAccess

 string

  flash脚本文件的访问模式，如果在本地测试设置为always，默认值：sameDomain 
 scriptData

 JSON

 传递多余参数信息，格式json，示例：'scriptData': {'firstName':'Ronnie','age':30}

备注必须添加属性 'method':'GET', 否则无用。
后台接收： string first = context.Request.QueryString["firstName"]==null?"":context.Request.QueryString["firstName"].ToString();
 simUploadLimit

 string

  允许同时上传的个数 默认值：1
 sizeLimit

 string

  上传文件的大小限制 单位kb
 uploader

 string

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

 int

  设置浏览按钮的宽度 ，默认值：110；示例：'width': 250
 wmode

 string

  设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层。 默认值：opaque,示例：'wmode': 'transparent'
     
      
</div>

 

uploadify方法说明 
<div>
 

Methods方法

 Methods说明
 名称

 参数

  说明
 .uploadify()

 options

  创建一个Uploadify上载的实例
示例：
  1. $('#file_upload').uploadify({
  2.   'uploader'    : '/uploadify/uploadify.swf',
  3.   'script'      : '/uploadify/uploadify.php',
  4.   'cancelImg'   : '/uploadify/cancel.png',
  5.   'folder'      : '/uploads',
  6.   'multi'       : true
  7. });
 .uploadifyCancel()

 ID

  从队列中删除一个文件。如果上传正在进行中，将取消上传和从队列中删除该文件。
示例：
  1. <input type="file" id="file_upload" name="file_upload" />
  2. <a href="javascript:$('#file_upload').uploadifyUpload();">上传文件</a> | 
  3. <a href="javascript:$('#file_upload').uploadifyCancel($('.uploadifyQueueItem')
  4. .first().attr('id').replace('file_upload',''))">取消第一个文件</a>
 .uploadifyClearQueue()

 无

  从文件中删除所有文件上传队列并取消所有的文件上传，在正在进行中。
示例
  1. <input type="file" id="file_upload" name="file_upload" />
  2. <a href="javascript:$('#file_upload').uploadifyUpload();">上传文件 </a> | 
  3. <a href="javascript:$('#file_upload').uploadifyClearQueue();">取消上传 </a>
 .uploadifySettings()

 name
value
resetObject

  更改一Uploadify实例的选项，可以更改的属性见下方备注，resetObject为可选，设置为true时更新scriptData值以清除现有的对象。
示例：
  1. <input type="file" id="file_upload" name="file_upload" />
  2. <a href="javascript:$('#file_upload').uploadifySettings('buttonText','新按钮');">改变文字</a>
 .uploadifyUpload()

 ID

  触发文件上传
示例：
  1. <input type="file" id="file_upload" name="file_upload" />
  2. <a href="javascript:$('#file_upload').uploadifyUpload($('.uploadifyQueueItem').last().attr('id')
  3. .replace('file_upload',''));">Upload Last File</a>

uploadifySettings方法可更改的属性:

  • buttonImg
  • buttonText
  • cancelImg
  • fileDesc
  • fileExt
  • folder
  • height
  • hideButton
  • script
  • scriptData
  • simUploadLimit
  • sizeLimit
  • width

</div>

  

uploadify中的事件说明 
<div>
 

Event说明

Event事件说明

 名称

 类型

 说明
 onAllComplete

 function

  文件队列中所有的文件上传完成后触发。该函数有event和data两个参数，data有四个属性，分别为：
1.filesUploaded :上传的所有文件个数。
2.errors ：出现错误的个数。
3.allBytesLoaded ：所有上传文件的总大小。
4.speed ：平均上传速率 kb/s
示例：
  1.  'onAllComplete' : function(event,data) {
  2.       alert(data.filesUploaded +  ' 个文件上传传功!');
  3.     }
 onCancel

 function

  当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、data四个参数，前三个参数和onSelect中一样，第四个参数为：
1.fileCount：取消一个文件后，文件队列中剩余文件的个数。
2.allBytesTotal：取消一个文件后，文件队列中剩余文件的大小。
示例：
  1. 'onCancel'    : function(event,ID,fileObj,data) {
  2.       alert( '上传文件' + fileObj.name +  ' 已被取消!');
  3.     }
 onCheck

 function

  上传文件时检验是否存在相同文件名文件。该函数有event、data、key三个参数，其中key为服务器文件唯一标识。data为一个对象，它包含文件名，在服务器上存在的清单。每个文件名的关键是队列项的唯一ID。
示例：
  1.  'onCheck' : function(event,data,key) {
  2.       $('#file_upload' + key).find('.percentage').text(' - 该文件已经存在！');
  3.     }
 onClearQueue

 function

  当调用函数fileUploadClearQueue时触发。有event和data两个参数，同onCancel 中的两个对应参数
 onComplete

 function

  文件上传完成后触发。该函数有四个参数event、queueId、fileObj、response、data五个参数，前三个参数同上。response为后台处理返回文本，可以是文本类型或者json类型，下面是json转换，如果是文本类型直接当response为变量使用
示例：
'onComplete': function(event, ID, fileObj, response, data)
 {   var datainfo = $.parseJSON(response);
    if (datainfo.type == 'notification')
    {
      alert('Do something');
     }
 },
后台返回code:
context.Response.ContentType = "application/json";
context.Response.Write("{\"status\":\"true\",\"guidfile\":\"" + guidid +  "\"}");//json格式
文本格式：
context.Response.ContentType = "text/plain";
context.Response.Write("true$a$" + sNewFileName + sExtension + "$a$" + guidid + sExtension);//里面是组合了多个变量利用$a$分隔
data对象：
1.fileCount：剩余没有上传完成的文件的个数。 2.speed：文件上传的平均速率 kb/s
 onError

 function

 当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数。errorObj对象有type和info，其中
1.type：错误的类型，有三种‘HTTP’, ‘IO’, or ‘Security’
2.info：错误的描述 
 示例：'onError': function(event, ID, fileObj, errorObj) {
            alert(errorObj.type + ' Error: ' + errorObj.info);//弹出上传错误信息
        },
 onInit

 function

  做一些初始化的工作
示例：
  1. 'onInit'  : function() {
  2.       alert( '初始化完成按钮!');
  3.     },
 onOpen

 function

  点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列。该函数有event、queueId、fileObj，参数参考onSelect事件下
示例：
  1. 'onOpen' : function(event,ID,fileObj) {
  2.       $('#uploader_message').text( '开始上传文件 ' + fileObj.name);
  3.     },
 onProgress

 function

  点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列，在onOpen之后触发。该函数有event、queueId、fileObj、data，前三个参数参考onSelect事件下，后面data参数：
1.percentage：当前完成的百分比
2.bytesLoaded：当前上传的大小
3.allBytesLoaded：文件队列中已经上传完的大小
4.speed：上传速率 kb/s
示例：
  1. 'onProgress': function(event,ID,fileObj,data) {
  2.       var bytes = Math.round(data.bytesLoaded / 1024);
  3.       $('#' + $(event.target).attr('id') + ID).find('.percentage').text(' - ' + bytes + 'KB Uploaded');
  4.       return false;
  5.     }
 onQueueFull

 function

  当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发。该函数有两个参数event和queueSizeLimit
示例：
  1.  'onQueueFull' : function (event,queueSizeLimit) {
  2.       alert( "已经超出最大文件数"+queueSizeLimit +"个了!");
  3.       return false;
  4.     }
 onSelect

 function

选择文件时触发，该函数有三个参数
event:事件对象。
queueID：文件的唯一标识，由6为随机字符组成。
fileObj：选择的文件对象，有name、size、creationDate、modificationDate、type 5个属性。
示例
 

'onSelect': function(e, queueId, fileObj) {
            alert("唯一标识:" + queueId + "\r\n" +
                  "文件名：" + fileObj.name + "\r\n" +
                  "文件大小：" + fileObj.size + "\r\n" +
                  "创建时间：" + fileObj.creationDate + "\r\n" +
                  "最后修改时间：" + fileObj.modificationDate + "\r\n" +
                  "文件类型：" + fileObj.type
          )
        },

 onSelectOnce

 function

 在单文件或多文件上传时，选择文件时触发。该函数有两个参数event，data，data对象有以下几个属性：
1.fileCount：选择文件的总数。
2.filesSelected：同时选择文件的个数，如果一次选择了3个文件该属性值为3。
3.filesReplaced：如果文件队列中已经存在A和B两个文件，再次选择文件时又选择了A和B，该属性值为2。
4.allBytesTotal：所有选择的文件的总大小。
示例：
'onSelectOnce' : function(event,data) {
      alert(data.filesSelected + ' files were selected for upload.');
    } onSWFReady

 function

 加载flash时触发函数
示例：
  1.  'onSWFReady'  : function() {
  2.       alert( 'flash按钮已加载完成');
  3.     }

 

备注：

  • event:事件对象。
  • queueID：文件的唯一标识，由6为随机字符组成。
  • fileObj：选择的文件对象，有name(文件名)、size(文件大小)、creationDate(文件创建时间)、modificationDate(文件最后修改时间)、type(文件类型) 5个属性。
  • data对象：包含-->1.fileCount：选择文件的总数。
                                  2.filesSelected：同时选择文件的个数，如果一次选择了3个文件该属性值为3。
                                  3.filesReplaced：如果文件队列中已经存在A和B两个文件，再次选择文件时又选择了A和B，该属性值为2。
                                  4.allBytesTotal：所有选择的文件的总大小。
</div>

 

常见问题 
.Net下使用uploadify会遇到的问题解决方法

1、json接收返回数据？

答： 
js中onComplete事件定义：
'onComplete': function(event, ID, fileObj, response, data){
    var datainfo = $.parseJSON(response);
    if (datainfo.type == 'notification') 
    {
       alert('Do something');
    }
},

后台返回code:
context.Response.ContentType = "application/json";
context.Response.Write("{\"status\":\"true\",\"guidfile\":\"" + guidid + "\"}");  //json格式 
2、scriptData传递json参数问题？

'scriptData': {'firstName':'Ronnie','age':30}
必须添加属性 'method':'GET', 否则无用。
后台接收：
string first = context.Request.QueryString["firstName"]==null?"":context.Request.QueryString["firstName"].ToString(); 
3、上传大文件IO失败问题？

解决方法：
1、uploadify控件的自定义size必须调整大小，即属性：sizeLimit:'300000000000' //根据自己需要 
2、asp.net中webconfig用记事本打开，插在<system.web></system.web>之间， 
“<httpRuntime maxRequestLength="2097151" executionTimeout="50000" />” maxRequestLength大小自己定义 
3、 修改iis的配置文件 
打到%windir%\system32\inetsrv\config\applicationhost.config，用记事本打开，在该 ApplicationHost.config 文件中找不到maxAllowedContentLength 属性。 那么自己添加一个值，使客户端发送作为请求的一部分的内容长度标头的大小相同。默认情况下, maxAllowedContentLength 属性的值是 30000000。
帮助信息说到maxAllowedContentLength 的默认大不为30M。 
这时明白web.config文件中设定的是针对某个WEB站点．而非全部站点的上传大小。在当applicationhost.config 中未对maxAllowedContentLength 设定大小时 默认就是30M，在web.config中设定超过于30M，依然上传最大为30M。然而在applicationhost.config未找到节点，那么自己试着在system.webServer中添加此节点，一定要在system.webServer里设置。
<system.webServer>
<security>
<requestFiltering >
<requestLimits maxAllowedContentLength="1073741824" ></requestLimits>
</requestFiltering>
</security>
</system.webServer>

4、如果是iis7以上的服务，则见下方： 
1、打开IIS管理器，找到Default Web Site。先进行停止。
2、在IIS中双击“请求筛选”打开。
3、点击右边的“编辑功能设置”，打开“编辑请求筛选设置”对话框。
     其中的允许的最大容量长度，默认是”30000000“，30M，将其修改为你所需要的大小即可。
4、启动IIS.

前台代码:

 @using (Html.BeginForm())
      {
         <input type="button" id="btn_upload" value="上传" />
      }

<script type="text/javascript">
 // <![CDATA[
     $(document).ready(function () {
         $("#btn_upload").uploadify({ 
          'uploader':'/Scripts/uploadify/uploadify.swf', //uploadify.swf的相对路径
'script':'/files/imgupload',  //后台处理程序相对路径
'cancelImg':'/Scripts/uploadify/cancel.png',//取消上传的图标
'folder': 'upload',//上传文件存放的目录名称
'fileExt':'*.png',  //指定文件类型
'fileDesc':'只能上传png格式',
          'sizeLimit':1024*1024*4,//最大4M
//'buttonText':'浏览',浏览按钮的文本
'auto':true,//当为false时需要点上传按钮才能上传文件,为true时,自动传文件
'multi':false, //为true多文件上传
'onComplete':complete          
         });
     });   
   // ]]>
function complete(event,queueID,fileObj,response,data)
    {
       if(response=="1"){
         alert("上传成功");
       }else{
         alert("上传失败");
       }
    }
 </script>


后台代码:

/// <summary>
/// 保存存上传的文件
/// </summary>
/// <param name="FileData"></param>
/// <param name="saveFolder"></param>
/// <param name="filename"></param>
/// <returns></returns>
[AcceptVerbs(HttpVerbs.Post )]
public ContentResult ImgUpload(HttpPostedFileBase FileData,string saveFolder,string filename)

{

string result = "0";
     try
     {
          //处理文件上传的逻辑:文件保存位置,保存文件类型过滤自定义
          if (FileData != null && FileData.ContentLength > 0)
         {

            //保存的文件
            FileData.SaveAs(Server.MapPath("~/upload/") + FileData.FileName);
            result = "1";
          }
     }
     catch (Exception)
    {
        result = "0";
     }
          return Content(result);

}

posted @ 2012-02-23 17:41  奎宇工作室  阅读(774)  评论(0)  编辑  收藏  举报