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

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

6.1.数据结构-c/c++堆详解下篇(堆排序,TopK问题)

上篇:6.1.数据结构-c/c++模拟实现堆上篇(向下,上调整算法,建堆,增删数据)-CSDN博客 本章重点 1.使用堆来完成堆排序 2.使用堆解决TopK问题 目录 一.堆排序 1.1 思路 1.2 代码 1.3 简单测试 二.TopK问题 2.1 思路(求最小): 2.2 C语言代码(手写堆) 2.3 C++代码(使用优先级队列 priority_queue)

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧