jQuery上传插件uploadify中文文档
来源:互联网 发布:域名注册商和持有者 编辑:程序博客网 时间:2024/05/17 03:32
今天项目当中用到了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>
0 0
- jQuery上传插件uploadify中文文档
- JQuery上传插件Uploadify
- JQuery上传插件Uploadify
- JQuery上传插件Uploadify
- JQuery 上传插件 Uploadify
- 【jQuery】jQuery上传插件 - uploadify
- JQuery上传插件Uploadify详解及其中文按钮解决方案
- JQuery上传插件Uploadify详解及其中文按钮解决方案
- JQuery上传插件Uploadify详解及其中文按钮解决方案
- jQuery上传插件Uploadify详解及其中文按钮解决方案
- JQuery上传插件Uploadify详解及其中文按钮解决方案
- JQuery上传插件Uploadify详解及其中文按钮解决方案
- JQuery上传插件Uploadify详解及其中文按钮解决方案
- JQuery上传插件Uploadify详解及其中文按钮解决方案 .
- JQuery上传插件Uploadify详解及其中文按钮解决方案
- JQuery上传插件Uploadify详解及其中文按钮解决方案
- 修改jquery文件上传插件uploadify的英文为中文
- jquery.uploadify上传插件HTML5版中文api使用说明
- eclipse类、方法添加作者与功能描述注释
- Dr.Elephant Rest API -【Dr.Elephant系列文章-7】
- CUDA学习笔记五
- statusBar动画
- App版本迭代时间安排(思路重要)
- jQuery上传插件uploadify中文文档
- /etc/ld.so.conf文件
- STL vector的复制
- matlab 字符串处理
- CUDA学习笔记六
- Adnroid多媒体---音视频
- C++作业5
- Android-View的手势分发
- 用Java写脚本,常用的一些方法