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

本文主要是介绍JQuery上传插件Uploadify详解及其中文按钮解决方案 .,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

    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与存放文件队列的divID一致。

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

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


这篇关于JQuery上传插件Uploadify详解及其中文按钮解决方案 .的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/594904

相关文章

一文深入详解Python的secrets模块

《一文深入详解Python的secrets模块》在构建涉及用户身份认证、权限管理、加密通信等系统时,开发者最不能忽视的一个问题就是“安全性”,Python在3.6版本中引入了专门面向安全用途的secr... 目录引言一、背景与动机:为什么需要 secrets 模块?二、secrets 模块的核心功能1. 基

一文详解MySQL如何设置自动备份任务

《一文详解MySQL如何设置自动备份任务》设置自动备份任务可以确保你的数据库定期备份,防止数据丢失,下面我们就来详细介绍一下如何使用Bash脚本和Cron任务在Linux系统上设置MySQL数据库的自... 目录1. 编写备份脚本1.1 创建并编辑备份脚本1.2 给予脚本执行权限2. 设置 Cron 任务2

一文详解如何在idea中快速搭建一个Spring Boot项目

《一文详解如何在idea中快速搭建一个SpringBoot项目》IntelliJIDEA作为Java开发者的‌首选IDE‌,深度集成SpringBoot支持,可一键生成项目骨架、智能配置依赖,这篇文... 目录前言1、创建项目名称2、勾选需要的依赖3、在setting中检查maven4、编写数据源5、开启热

Python常用命令提示符使用方法详解

《Python常用命令提示符使用方法详解》在学习python的过程中,我们需要用到命令提示符(CMD)进行环境的配置,:本文主要介绍Python常用命令提示符使用方法的相关资料,文中通过代码介绍的... 目录一、python环境基础命令【Windows】1、检查Python是否安装2、 查看Python的安

C++高效内存池实现减少动态分配开销的解决方案

《C++高效内存池实现减少动态分配开销的解决方案》C++动态内存分配存在系统调用开销、碎片化和锁竞争等性能问题,内存池通过预分配、分块管理和缓存复用解决这些问题,下面就来了解一下... 目录一、C++内存分配的性能挑战二、内存池技术的核心原理三、主流内存池实现:TCMalloc与Jemalloc1. TCM

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

Python中使用uv创建环境及原理举例详解

《Python中使用uv创建环境及原理举例详解》uv是Astral团队开发的高性能Python工具,整合包管理、虚拟环境、Python版本控制等功能,:本文主要介绍Python中使用uv创建环境及... 目录一、uv工具简介核心特点:二、安装uv1. 通过pip安装2. 通过脚本安装验证安装:配置镜像源(可

C++ 函数 strftime 和时间格式示例详解

《C++函数strftime和时间格式示例详解》strftime是C/C++标准库中用于格式化日期和时间的函数,定义在ctime头文件中,它将tm结构体中的时间信息转换为指定格式的字符串,是处理... 目录C++ 函数 strftipythonme 详解一、函数原型二、功能描述三、格式字符串说明四、返回值五

LiteFlow轻量级工作流引擎使用示例详解

《LiteFlow轻量级工作流引擎使用示例详解》:本文主要介绍LiteFlow是一个灵活、简洁且轻量的工作流引擎,适合用于中小型项目和微服务架构中的流程编排,本文给大家介绍LiteFlow轻量级工... 目录1. LiteFlow 主要特点2. 工作流定义方式3. LiteFlow 流程示例4. LiteF