jQuery上传插件uploadify中文文档

2024-05-30 18:38
文章标签 javascript 文档 中文 jquery 插件 frontend 上传 uploadify

本文主要是介绍jQuery上传插件uploadify中文文档，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

今天项目当中用到了uploadify上传插件，之前虽然也有用过这个插件，但是基本只是用了他的上传功能，关于他的一些参数，一些事件，都没有认真的去了解。
这一次相比上次还是认真看了一下文档，并且对一些事件有了一些了解。所以顺便将文档翻译方便有需要的朋友使用。如果有错误的地方，欢迎大家指正。

引入插件

我们只需要使用以下代码片段，就可以使用这个插件了
当然，在此之前，我们还需要引入一个css样式文件，以及jQuery库文件，uploadify的js文件，以及在input上加上与代码片段相同的id。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css" />
<script type="text/javascript" src="/jquery.uploadify-3.1.min.js"></script>
<input type="file" name="file_upload" id="file_upload" />
$(function() {$('#file_upload').uploadify({'swf'      : 'uploadify.swf','uploader' : 'uploadify.php'// Put your options here});
});

接下来就是重点了，丰富的options以及事件让uploadify插件变得非常强大

选项设置说明

auto
// 默认为true，即当文件被选择时，自动进行上传。如果你设置为false，则通过upload方法开始上传。
buttonClass
// 这个选项是给选择文件的按钮指定一个class样式，通过这个指定，我们可以对默认的按钮样式进行修改。
buttonCursor
// 指定当鼠标悬停在选择文件按钮上时，鼠标的样式。可以是手形或者是默认的箭头。
// hand 手形
// arrow 箭头
buttonImage
// 设置一张图片作为按钮的背景。
buttonText
// 设置按钮上显示的文本。
checkExisting
// 默认为false，如果设置为true，当你重复上传一个文件的时候，会进行提示。
debug
// 默认为false，当你设置为true的时候，会将所有的操作显示，方便查找到问题。
fileObjName
// 默认为Filedata，如设置为'the_files'，后台PHP取数据时为 $_FILE['the_files']
fileSizeLimit
// 允许上传的文件最大尺寸。如果设置为0则不限制，如果指定大小，可以为'100KB'，单位可以是'B','KB','MB'或'GB'
fileTypeDesc
// 选择文件时的描述。这个字符串出现在浏览文件对话框的文件类型下拉列表中。
// 我设置这个属性并没有看到效果，你可以尝试看看。
fileTypeExts
// 允许被上传的文件类型。这个检测可以被绕过，所以服务端还是有必要做安全检测的。
// 'fileTypeExts' : '*.gif; *.jpg; *.png'      限制上传的格式
// 'fileTypeExts' : '*.*'                      默认为不限制
formData
// 如果你在上传文件时，想提交一些额外的数据到服务端，可以使用这个参数。
// 'formData'      : {'someKey' : 'someValue', 'someOtherKey' : 1},   使用格式
// 建议使用后面介绍的 onUploadStart 事件提交这些参数，而不是写在这个选项当中。
height
// 设置选择文件按钮的高度
// 'height'   : 50,
width
// 设置选择文件按钮的宽度
// 'width'    : 300
itemTemplate
// 我们可以通过设置这个选项，修改文件添加到队列中的样式。即选择文件开始上传后，显示上传进度那个框的样式。
//'itemTemplate' : '<div id="${fileID}" class="uploadify-queue-item">\
//                  <div class="cancel">\
//                  <a href="javascript:$(\'#${instanceID}\').uploadify(\'cancel\', \'${fileID}\')">X</a>\
//                  </div>\
//                  <span class="fileName">${fileName} (${fileSize})</span><span  class="data"></span>\
//                  </div>'
// ${instanceID}  uploadify实例的ID
// ${fileID}      文件在上传队列中的ID
// ${fileName}    文件在上传队列中的名称
// ${fileSize}    文件在上传队列中的大小
method
// 提交文件上传时使用的方法，默认是post
multi
// 默认为true。设置为false，一次只能选择一个文件进行上传。
overrideEvents
// 可以设置一些你想绕过的事件。默认为空
// 'overrideEvents' : ['onUploadProgress'],  这样设置之后，将不会返回当前文件的上传进度。
preventCaching
// 默认为true，会给uploadify的swf文件URL后加上随机值，防止浏览器加载swf的缓存。
// 基本不需要修改，至于在什么场景下需要修改为false，我还不太清楚，如果你知道，欢迎评论告诉我。
progressData
// 设置在显示文件上传进度的时候，显示文件上传速度还是文件已上传的百分比
// 默认设置为 percentage 百分比，可以设置为 speed 会显示上传速度
queueID
// 可以为显示上传文件的框指定一个显示区域。
// 'queueID'  : 'queue_content',     设置的格式，ID不需要#号
queueSizeLimit
// 指定队列中上传文件的数量，即同时被上传的文件数量。如设置为1，则必须等到文件上传完成后，才可以再添加文件到队列。默认为999
// 'queueSizeLimit' : 1,         设置的格式
removeCompleted
// 默认为true，设置为false时，文件上传完成后，不会被移除，而是一直显示在队列当中。
removeTimeout
// 文件上传成功后，多少秒后移除出队列。默认为3秒
requeueErrors
// 文件上传失败后，自动重新上传。默认为false
successTimeout
// 文件上传成功后，等待服务器返回信息的时间。默认为30秒。如超时未返回，插件默认为返回了成功。
swf
// 指定uploadify.swf的路径，默认为当前目录
uploader
// 指定服务端上传处理文件的路径
uploadLimit
// 允许上传文件的最大数量，当达到或超过这个数字时，会触发onUploadError事件，默认为999

触发事件说明

onCancel 当一个文件从上传队列中被删除时触发
// 参数
// file 该文件对象被取消
$(function() {$("#file_upload").uploadify({'auto'     : false,'swf'      : '/uploadify/uploadify.swf','uploader' : '/uploadify/uploadify.php','onCancel' : function(file) {alert('The file ' + file.name + ' was cancelled.');}});
});
onClearQueue 当取消方法被调用以’*’作为参数触发此事件。
// 参数
// queueItemCount 被取消的文件数目
$(function() {$("#file_upload").uploadify({'auto'         : false,'swf'          : '/uploadify/uploadify.swf','uploader'     : '/uploadify/uploadify.php','onClearQueue' : function(queueItemCount) {alert(queueItemCount + ' file(s) were removed from the queue');} });
});
onDestroy 调用destroy方法时触发。
$(function() {$("#file_upload").uploadify({'swf'       : '/uploadify/uploadify.swf','uploader'  : '/uploadify/uploadify.php','onDestroy' : function() {alert('I am getting destroyed!');}});
});
onDialogClose 当浏览文件对话框关闭时触发。如果该事件被添加到覆盖事件选项，如果将文件添加到队列时发生错误，默认的错误消息将不会提示。
// 参数
// queueData 包含有关队列信息的queueData对象：
// filesSelected  文件的浏览文件对话框中选择数
// filesQueued   添加到队列的文件数（即未返回一个错误）
// filesReplaced 在队列中替换的文件的数目
// filesCancelled 即，从被添加到队列取消的文件数（未取代）
// filesErrored 该返回错误的文件数$(function() {$("#file_upload").uploadify({'fileSizeLimit'  : '50KB','overrideEvents' : ['onDialogClose'],'swf'            : '/uploadify/uploadify.swf','uploader'       : '/uploadify/uploadify.php','onDialogClose'  : function(queueData) {alert(queueData.filesQueued + ' files were queued of ' + queueData.filesSelected + ' selected files. There are ' + queueData.queueLength + ' total files in the queue.');}});
});
onDialogOpen 打开浏览文件对话框之前触发，但是放在这个函数的代码可能无法触发，直到对话框关闭。
$(function() {$("#file_upload").uploadify({'swf'          : '/uploadify/uploadify.swf','uploader'     : '/uploadify/uploadify.php','onDialogOpen' : function() {$('#message_box').html('The file dialog box was opened...');}});
});
onDisable 禁用uploadify时触发
$(function() {$("#file_upload").uploadify({'swf'      : '/uploadify/uploadify.swf','uploader' : '/uploadify/uploadify.php','onDisable' : function() {alert('You have disabled Uploadify!');}});
});
onEnable 启用uploadify时触发
$(function() {$("#file_upload").uploadify({'swf'      : '/uploadify/uploadify.swf','uploader' : '/uploadify/uploadify.php','onEnable' : function() {alert('You can use Uploadify again.');}});
});
onFallback 浏览器不兼容Flash时触发
$(function() {$("#file_upload").uploadify({'swf'        : '/uploadify/uploadify.swf','uploader'   : '/uploadify/uploadify.php','onFallback' : function() {alert('Flash was not detected.');}});
});
onInit 初始化Uploadify完成后的调用
$(function() {$("#file_upload").uploadify({'swf'      : '/uploadify/uploadify.swf','uploader' : '/uploadify/uploadify.php','onInit'   : function(instance) {alert('The queue ID is ' + instance.settings.queueID);}});
});
onInit 初始化Uploadify完成后的调用
// 参数
// instance 初始化完成的uploadify对象
$(function() {$("#file_upload").uploadify({'swf'      : '/uploadify/uploadify.swf','uploader' : '/uploadify/uploadify.php','onInit'   : function(instance) {alert('The queue ID is ' + instance.settings.queueID);}});
});
onQueueComplete 当队列中的所有文件已被处理时触发。
// 参数
// queueData 包含有关队列信息的queueData对象：
// uploadsSuccessful 已成功完成了上传的文件数量
// uploadsErrored  即返回错误的上传数
$(function() {$("#file_upload").uploadify({'swf'      : '/uploadify/uploadify.swf','uploader' : '/uploadify/uploadify.php','onQueueComplete' : function(queueData) {alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');}});
});
onSelect 从浏览文件对话框中选择文件并添加到队列中时触发
// 参数
// file 选择的文件对象
$(function() {$("#file_upload").uploadify({'swf'      : '/uploadify/uploadify.swf','uploader' : '/uploadify/uploadify.php','onSelect' : function(file) {alert('The file ' + file.name + ' was added to the queue.');}});
});
onSelectError 当选择文件返回一个错误时触发
// 参数
// file 返回错误的文件对象
// errorCode 返回的错误代码。以下常量可以判断错误代码时使用：
//   QUEUE_LIMIT_EXCEEDED 文件的数量超过限制
//   FILE_EXCEEDS_SIZE_LIMIT 文件的大小超过所设定的上限。
//   ZERO_BYTE_FILE 文件为空
//   INVALID_FILETYPE 文件类型不匹配已设置的文件类型的限制
// ERRORMSG 错误消息，可以使用 this.queueData.errorMsg 设置错误消息
$(function() {$("#file_upload").uploadify({'fileSizeLimit' : '50KB','swf'           : '/uploadify/uploadify.swf','uploader'      : '/uploadify/uploadify.php','onSelectError' : function() {alert('The file ' + file.name + ' returned an error and was not added to the queue.');}});
});
onSWFReady Flash对象加载完毕后触发
$(function() {$("#file_upload").uploadify({'swf'        : '/uploadify/uploadify.swf','uploader'   : '/uploadify/uploadify.php','onSWFReady' : function() {alert('The Flash file is ready to go.');}});
});
onUploadComplete 当上传完成后触发（即使上传失败），如果你想知道上传成功与否，建议使用onUploadSuccess 或 onUploadError
// 参数
// file 被上传的文件对象或返回一个错误
$(function() {$("#file_upload").uploadify({'swf'              : '/uploadify/uploadify.swf','uploader'         : '/uploadify/uploadify.php','onUploadComplete' : function(file) {alert('The file ' + file.name + ' finished processing.');}});
});
onUploadError 当一个文件被上传，但返回一个错误时触发。
// 参数
// file 被上传的文件对象
// errorCode 错误代码
// errorMsg 错误信息
// errorString 包含错误细节的可读信息
$(function() {$("#file_upload").uploadify({'swf'           : '/uploadify/uploadify.swf','uploader'      : '/uploadify/uploadify-not-existing.php','onUploadError' : function(file, errorCode, errorMsg, errorString) {alert('The file ' + file.name + ' could not be uploaded: ' + errorString);}});
});
onUploadProgress 每一个文件上传进度更新时触发。
// 参数
// file 正在被上传的文件对象
// bytesUploaded 该文件已上传的字节数
// bytesTotal 该文件的总字节数
// totalBytesUploaded 当前正在上传的所有文件已上传的字节数
// totalBytesTotal 当前正在上传的所有文件总字节数
$(function() {$("#file_upload").uploadify({'swf'              : '/uploadify/uploadify.swf','uploader'         : '/uploadify/uploadify.php','onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {$('#progress').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.');}});
});
onUploadStart 文件上传之前触发。
// 参数
// file 将要被上传的文件对象
$(function() {$("#file_upload").uploadify({'swf'           : '/uploadify/uploadify.swf','uploader'      : '/uploadify/uploadify.php','onUploadStart' : function(file) {alert('Starting to upload ' + file.name);}});
});
onUploadSuccess 文件上传成功后触发
// 参数
// file 已成功上传的文件对象
// data 服务端返回的数据
// response 服务器响应，成功返回为true，没有返回为false
$(function() {$("#file_upload").uploadify({'swf'             : '/uploadify/uploadify.swf','uploader'        : '/uploadify/uploadify.php','onUploadSuccess' : function(file, data, response) {alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);}});
});

方法使用说明

cancel 取消队列中的文件，或终止上传
// 参数
// fileID 要取消的文件ID，如果没有传入ID，则取消队列中的第一个文件。如果传入为*号，则取消队列中的所有文件。
// suppressEvent 如果设置为true，则onUploadCancel事件将不会被触发。清除队列时，这是非常有用的。<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('cancel')">Cancel First File</a> 
<a href="javascript:$('#file_upload').uploadify('cancel', '*')">Clear the Queue</a>
<a href="javascript:$('#file_upload').uploadify('upload', '*')">Upload the Files</a>
destroy 注销uploadify的实例
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('destroy')">Destroy Uploadify</a>
disable 禁用或启用选择文件按钮
// 参数
// setDisabled 设置为true禁用按钮，设置为false启用按钮
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('disable', true)">Disable the Button</a>
<a href="javascript:$('#file_upload').uploadify('disable', false)">Enable the Button</a>
settings 设置或返回uploadify的参数
// 参数
// name 要返回或设置的参数名称，只有该参数将返回值
// value 想要设置的值
// resetObjects 更新postData参数时，设置为true，将删除现有的值。设置为false，将添加到现有的值当中。
// 注意：不能设置swf参数的值。
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:changeBtnText()">Change the Button Text</a>
<a href="javascript:returnBtnText();">Read the Button</a>
function changeBtnText() {$('#file_upload').uploadify('settings','buttonText','BROWSE');
}
function returnBtnText() {alert('The button says ' + $('#file_upload').uploadify('settings','buttonText'));
}
stop 停止上传
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('upload', '*')">Upload the Files</a>
<a href="javascript:$('#file_upload').uploadify('stop')">Stop the Uploads!</a>
upload 上传特定文件或队列中的所有文件。
// 参数
// fileID 指定需要上传的文件ID，可以为多个。传*号上传所有文件
<input type="file" name="file_upload" id="file_upload" />
<a href="javascript:$('#file_upload').uploadify('upload','*')">Upload Files</a>

这篇关于jQuery上传插件uploadify中文文档的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1016708。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这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库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

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

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

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

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
活用c4d官方开发文档查询代码

活用c4d官方开发文档查询代码

当你问AI助手比如豆包，如何用python禁止掉xpresso标签时候，它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

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

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

Vue3项目开发——新闻发布管理系统（六）

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

【VUE】跨域问题的概念，以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略，该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同，则需要服务器显式地允许这种跨域请求。一般在springbo
阅读更多...
vscode中文乱码问题，注释，终端，调试乱码一劳永逸版

vscode中文乱码问题，注释，终端，调试乱码一劳永逸版

忘记咋回事突然出现了乱码问题，很多方法都试了，注释乱码解决了，终端又乱码，调试窗口也乱码，最后经过本人不懈努力，终于全部解决了，现在分享给大家我的方法。 乱码的原因是各个地方用的编码格式不统一，所以把他们设成统一的utf8. 1.电脑的编码格式 开始-设置-时间和语言-语言和区域 管理语言设置-更改系统区域设置-勾选Bata版：使用utf8-确定-然后按指示重启 2.vscode
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2