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

最新推荐文章于 2025-05-14 22:27:35 发布

kissdeath

最新推荐文章于 2025-05-14 22:27:35 发布

阅读量876

点赞数 1

分类专栏：学习园地文章标签： javascript jquery插件

学习园地专栏收录该内容

23 篇文章

订阅专栏

网上找了一天，大家都说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里，虽然是全英文的，但很容易看懂，这里就不说了。

以下是我用到的代码，可以参考一下：

[javascript] view plain copy print ?

<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);
// }
});