小程序常见问题科普_详解jQuery uploadify文件上传插

摘要: 详细说明jQuery uploadify文档提交软件的应用方式 创作者: 文中关键详细介绍了jQuery uploadify文档提交软件的应用方式,uploadify这一软件是根据js里边的jquery库写的。融合了ajax和flash,...

详解jQuery uploadify文件上传插件的使用方法     作者:   本文主要介绍了jQuery uploadify文件上传插件的使用方法,uploadify这个插件是基于js里面的jquery库写的。结合了ajax和flash,实现了这个多线程上传的功能。具有很好的参考价值,需要的朋友一起来看下吧

uploadify这个插件是基于js里面的jquery库写的。结合了ajax和flash,实现了这个多线程上传的功能。

现在最新版为3.2.1。

在线实例

实例中用到的php文件UploaderDemo.php请在页面下方下载

引入文件

link rel="stylesheet" type="text/css" href="uploadify.css" / script type="text/javascript" src="jquery.min.js" /script script type="text/javascript" src="jquery.uploadify.js" /script

使用方法

 form 
 div id="queue" /div 
 input id="file_upload" name="file_upload" type="file" multiple="true" 
 /form 
 div id="uploadfiles" /div 
 div id="fileQueue" /div 
 script type="text/javascript" 
var timestamp = new Date().getTime();
var token = Math.floor(Math.random() * 1000) + timestamp;
$(function() {
 $('#file_upload').uploadify({
 'buttonText': '选择文件..',
 'fileObjName': 'simplefile',
 'method': 'post',
 'multi': true,
 'queueID': 'fileQueue',
 //'uploadLimit': 2,
 'fileTypeExts': '*.gif;*.png;*.jpg;*.bmp;*.jpeg;',
 'buttonImage': '/static/js/uploadify/select.png',
 'formData': {
 'timestamp': timestamp,
 'token': token
 'swf': '/static/js/uploadify/uploadify.swf',
 'uploader': '/static/',
 'onUploadStart': function() {
 $imgHtml = ' img src="/static/images/upload.gif" align="absmiddle" / 
 $('#uploadfiles').append($imgHtml);
 'ess': function(file, data, response) {
 $('.upload_load').remove();
 var json = $.parseJSON(data);
 if (json.state == 'success') {
 $imgHtml = ' span id="file_' + json.file_id + '" 
 $imgHtml += ' a href="' + json.file + '" target="_blank" 
 $imgHtml += ' img src="' + json.file + '" width="100" height="100" align="absmiddle"/ 
 $imgHtml += ' /a 
 $imgHtml += ' a href="javascript:uploadifyRemove( quot;' + json.file + ' quot;)" 删除 /a 
 $imgHtml += ' /span 
 $($imgHtml).appendTo('#uploadfiles');
 } else {
 alert(json.message);
 'onQueueComplete': function() {
 $('.upload_load').remove();
 /script 

参数说明
一、属性
false 文件上传重复性检查程序,检查即将上传的文件在服务器端是否已存在,存在返回1,不存在返回0
‘Filedata' 文件上传对象的名称,如果命名为'the_files',PHP程序可以用$_FILES['the_files']来处理上传的文件对象。

上传文件的大小限制 ,如果为整数型则表示以KB为单位的大小,如果是字符串,则可以使用(B, KB, MB, or GB)为单位,比如'2MB';

如果设置为0则表示无限制


‘All Files' 这个属性值必须设置fileTypeExts属性后才有效,用来设置选择文件对话框中的提示文本,如设置fileTypeDesc为“请选择rar doc pdf文件”
  JSON格式上传每个文件的同时提交到服务器的额外数据,可在'onUploadStart'事件中使用'settings'方法动态设置。
用于设置上传队列的HTML模版,可以使用以下标签:
instanceID – Uploadify实例的ID
fileID – 列队中此文件的ID,或者理解为此任务的ID
fileName – 文件的名称
fileSize – 当前上传文件的大小
插入模版标签时使用格式如:${fileName}
队列最多显示的任务数量,如果选择的文件数量超出此限制,将会出发onSelectError事件。
注意此项并非最大文件上传数量,如果要限制最大上传文件数量,应设置uploadLimit。

当点击文件队列中文件的关闭按钮或点击取消上传时触发,file参数为被取消上传的文件对象


onClearQueue(queueItemCount) 当调用函数cancel方法时触发,queueItemCount参数为被取消上传的文件数量。

当文件浏览框关闭时触发,如果将此事件被重写,则当向队列添加文件上传出错时不会弹出错误消息提示。

queueData对象包含如下属性:

filesSelected 文件选择对话框中共选择了多少个文件 filesQueued 已经向队列中添加了多少个文件 filesReplaced 已经向队列中替换了多少个文件 filesCancelled 取消了多少个文件 filesErrored 出错了多少个文件
onDialogOpen() 当文件选择对话框弹出时立即出发,但可能在文件选择对话框被关闭之前并不能全部执行。
QUEUE_LIMIT_EXCEEDED – 任务数量超出队列限制; FILE_EXCEEDS_SIZE_LIMIT – 文件大小超出限制; ZERO_BYTE_FILE – 文件大小为0 INVALID_FILETYPE – 文件类型不符合要求

errorMsg – 错误提示,可通过'this.queueData.errorMsg'定制


onUploadError(file, errorCode, errorMsg, errorString) 文件上传出错时触发,参数由服务端程序返回。
onUploadProgress(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal)

处理上传队列的过程中会多次触发此事件,每当任务状态有更新时都会触发。

file – 文件对象 bytesUploaded – 已上传的字节数 bytesTotal – 文件总字节数 totalBytesUploaded – 当前任务队列中全部文件已上传的总字节数 totalBytesTotal – 当前任务队列中全部文件的总字节数
response – 有输出时为true,如果无响应为false,essTimeout设置的时间后假定为true
fileID – 要取消的文件ID,如果为空则取消队列中第一个任务,如果为'*'则取消所有任务 suppressEvent – 是否阻止触发onUploadCancel事件,当清空队列时非常实用。
value – 属性值 resetObjects – 设置为true时,更新postData对象将清空现有的值。否则,新的值将被添加到其末尾。
$(‘#file_upload').uploadify(‘settings','buttonText','BROWSE'); $(‘#file_upload').uploadify(‘settings','buttonText'));
upload(fileID) 立即上传指定的文件,如果fileID为'*'表示上传所有文件,要指定上传多个文件,则将每个文件的fileID作为一个参数

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:真正免费建站