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

相关文章

Java使用ANTLR4对Lua脚本语法校验详解

《Java使用ANTLR4对Lua脚本语法校验详解》ANTLR是一个强大的解析器生成器,用于读取、处理、执行或翻译结构化文本或二进制文件,下面就跟随小编一起看看Java如何使用ANTLR4对Lua脚本... 目录什么是ANTLR?第一个例子ANTLR4 的工作流程Lua脚本语法校验准备一个Lua Gramm

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

一文详解如何在Python中从字符串中提取部分内容

《一文详解如何在Python中从字符串中提取部分内容》:本文主要介绍如何在Python中从字符串中提取部分内容的相关资料,包括使用正则表达式、Pyparsing库、AST(抽象语法树)、字符串操作... 目录前言解决方案方法一:使用正则表达式方法二:使用 Pyparsing方法三:使用 AST方法四:使用字

Python列表去重的4种核心方法与实战指南详解

《Python列表去重的4种核心方法与实战指南详解》在Python开发中,处理列表数据时经常需要去除重复元素,本文将详细介绍4种最实用的列表去重方法,有需要的小伙伴可以根据自己的需要进行选择... 目录方法1:集合(set)去重法(最快速)方法2:顺序遍历法(保持顺序)方法3:副本删除法(原地修改)方法4:

Spring Boot循环依赖原理、解决方案与最佳实践(全解析)

《SpringBoot循环依赖原理、解决方案与最佳实践(全解析)》循环依赖指两个或多个Bean相互直接或间接引用,形成闭环依赖关系,:本文主要介绍SpringBoot循环依赖原理、解决方案与最... 目录一、循环依赖的本质与危害1.1 什么是循环依赖?1.2 核心危害二、Spring的三级缓存机制2.1 三

python logging模块详解及其日志定时清理方式

《pythonlogging模块详解及其日志定时清理方式》:本文主要介绍pythonlogging模块详解及其日志定时清理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录python logging模块及日志定时清理1.创建logger对象2.logging.basicCo

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

SQL表间关联查询实例详解

《SQL表间关联查询实例详解》本文主要讲解SQL语句中常用的表间关联查询方式,包括:左连接(leftjoin)、右连接(rightjoin)、全连接(fulljoin)、内连接(innerjoin)、... 目录简介样例准备左外连接右外连接全外连接内连接交叉连接自然连接简介本文主要讲解SQL语句中常用的表