jQuery上传插件Uploadify详解及其中文按钮解决方案

转载 2012年03月22日 18:49:47

    网上找了一天,大家都说Uploadify唯一的缺点就是不支持中文按钮,杯具之前,我看了下Uploadify的API,才发现了几个参数没被大家提及的,这正是解决此问题的关键。(以后坚决养成没事就看API的习惯)

    Uploadify有一个参数是 buttonText 这个无论你怎么改都不支持中文,因为插件在js里用了一个转码方法把这个参数的值转过码了,解码的地方在那个swf文件里,看不到代码,所以这条路不行。

    另一个参数,网上很少提到,是 buttonImg( 按钮图片),这时你完全可以用一个图片来替换掉插件自带的那个黑色的flash浏览按钮,只要你自己的图片上是中文,这不就解决了中文按钮问题么?如果只加这一个,你会发现你的按钮图片下面有一片白色区域,其实就是那个flash留下的,白色区域表示鼠标可用范围,这个范围可以用width,height来调整。还有一个参数 wmode 它的默认值是opaque,把它改成transparent就行了,也就是把那片白色区域透明化。再用刚才说的方法,把按键点击范围设置成跟你图片一样大就完全OK了。

============================================

    Uploadify的用法就不说了,网上文章很多,跟别的jquery插件用法一样,就是几种文件的摆放路径而已。

    以下附上Uploadify部分参数的介绍,要看全部的就去看其API文件了,一般在下载的包里都有。

  

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

  script : 后台处理程序的相对路径 。默认值:uploadify.php

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

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

  method : 提交方式Post 或Get 默认为Post

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

  folder : 上传文件存放的目录 。

  queueID : 文件队列的ID,该ID与存放文件队列的div的ID一致。

  queueSizeLimit : 当允许多文件生成时,设置选择文件的个数,默认值:999 。

  multi : 设置为true时可以上传多个文件。

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

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

  fileExt : 设置可以选择的文件的类型,格式如:'*.doc;*.pdf;*.rar' 。

  sizeLimit : 上传文件的大小限制 。

  simUploadLimit : 允许同时上传的个数 默认值:1 。

  buttonText : 浏览按钮的文本,默认值:BROWSE 。

  buttonImg : 浏览按钮的图片的路径 。

  hideButton : 设置为true则隐藏浏览按钮的图片 。

  rollover : 值为true和false,设置为true时当鼠标移到浏览按钮上时有反转效果。

  width : 设置浏览按钮的宽度 ,默认值:110。

  height : 设置浏览按钮的高度 ,默认值:30。

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

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


Uploadify还自带了很多参数及有用的方法和回调函数,都在API里,虽然是全英文的,但很容易看懂,这里就不说了。

以下是我用到的代码,可以参考一下:


<script type="text/javascript">  
$(document).ready(function() {  
$("#uploadify").uploadify({  
    'uploader'       : 'images/uploadify.swf',  
    'script'         : '<%=request.getContextPath()%>/content/ImportScheduleCommitAction.do',  
    'cancelImg'      : 'images/cancel.png',  
    'folder'         : '/',  
    'queueID'        : 'fileQueue',  
    'fileDataName'   : 'uploadify',  
    'fileDesc'       : '支持格式:xls.',   
    'fileExt'        : '*.xls',  
    'auto'           : false,  
    'multi'          : true,  
    'height'         : 20,  
    'width'          : 50,  
    'simUploadLimit' : 3,  
   //'buttonText'     : 'fdsfdsf...',  
    'buttonImg'      : 'images/browse.jpg',  
   // 'hideButton'     : true,  
   // 'rollover'       : true,  
    'wmode'          : 'transparent' ,  
    onComplete       : function (event, queueID, fileObj, response, data)  
     {   
      $('<li></li>').appendTo('.files').text(response);   
     },   
    onError          : function(event, queueID, fileObj)  
     {   
       alert("文件:" + fileObj.name + " 上传失败");   
     }   
// onCancel         : function(event, queueID, fileObj)  
// {   
//     alert("取消文件:" + fileObj.name);   
// }   
   });
<script type="text/javascript">
$(document).ready(function() {
$("#uploadify").uploadify({
    'uploader'       : 'images/uploadify.swf',
    'script'         : '<%=request.getContextPath()%>/content/ImportScheduleCommitAction.do',
    'cancelImg'      : 'images/cancel.png',
    'folder'         : '/',
    'queueID'        : 'fileQueue',
    'fileDataName'   : 'uploadify',
    'fileDesc'       : '支持格式:xls.',
    'fileExt'        : '*.xls',
    'auto'           : false,
    'multi'          : true,
    'height'         : 20,
    'width'          : 50,
    'simUploadLimit' : 3,
   //'buttonText'     : 'fdsfdsf...',
    'buttonImg'      : 'images/browse.jpg',
   // 'hideButton'     : true,
   // 'rollover'       : true,
    'wmode'          : 'transparent' ,
    onComplete       : function (event, queueID, fileObj, response, data)
     {
      $('<li></li>').appendTo('.files').text(response);
     },
    onError          : function(event, queueID, fileObj)
     {
       alert("文件:" + fileObj.name + " 上传失败");
     }
// onCancel         : function(event, queueID, fileObj)
// {
//     alert("取消文件:" + fileObj.name);
// }
   });

要注意的是,我的script属性值是一个请求路径,我发现在我设置了同时上传多个文件后(比如3),并不是每请求一次去上传3个文件,而仍然是执行3次请求,请求一次上传一个文件。这也没办法,uplodify有那么多回调函数,要是一次处理多个,那回调函数的参数就不知道拿哪个了,因为这些参数都不是数组。

也就是说,无论你设置同时上传几个文件,它都会一个一个去请求并上传,只是表面上感觉好像有多个线程同时在处理上传请求一样,只是表象而已。而且如果你把simUploadLimit设置过大就会经常出错,我设置成5的时候经常会有一两个文件上传失败。


相关文章推荐

jquery uploadify在谷歌浏和火狐下无法上传的解决方案(.Net版)

在项目紧张的进行过程中,jquery uploadify上传不兼容的问题一直没有试着去解决,只幻想着用ie的人越来越多,怎么奈何firefox4刚推出,就有4000万的下载.......仰天长叹,记生...

jQuery Uploadify上传插件使用中的问题 中文字符文件名转英文

最近项目中发现一个问题,由于后台对用户上传的文件名的处理有局限,不允许用户上传中文名字的文件,或者需要对用户上传的中文文件名称进行处理,然后再传给后台保存。 如图所示,规定应用文件的包名为后缀....

强大的jquery上传插件SWF版Uploadify参数详解

强大的jquery上传插件SWF版Uploadify参数详解说到Uploadify,不用说网络上很多人都在用,这可是个非常强大的上传插件,但遗憾的是的其html5版是收费的,5刀,需要的可以去其官方网...

JQuery上传插件Uploadify使用详解

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示...

JQuery上传插件Uploadify使用详解

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示...

JQuery上传插件Uploadify使用详解

JQuery上传插件Uploadify使用详解 Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。不过官方提供的实例时php版本的,本文将详细介绍Uploa...

JQuery上传插件Uploadify使用详解及错误处理

什么是Uploadify   Uploadify是JQuery的一个上传插件,支持多文件上传,实现的效果非常不错,带进度显示。   官网提供的是PHP的DEMO,在这里我详细介绍在Asp.net下的使...

jQuery上传插件Uploadify使用详解

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)