uploadify这个插件是基于js里面的jquery库写的。结合了ajax和flash，实现了这个多线程上传的功能。
现在最新版为3.2.1。
在线实例
实例中用到的php文件UploaderDemo.php请在页面下方下载
引入文件
<link type="text/css" href="https://www.jb51.net/uploadify.css" />
<script type="text/javascript" src="https://www.jb51.net/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jb51.net/jquery.uploadify.js"></script>
使用方法
<form> <div></div> <input type="file" multiple="true"> </form> <div></div> <div></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/php/UploaderDemo.php', 'onUploadStart': function() { $imgHtml = '<img src="https://www.jb51.net/static/images/upload.gif" />'; $('#uploadfiles').append($imgHtml); }, 'onUploadSuccess': function(file, data, response) { $('.upload_load').remove(); var json = $.parseJSON(data); if (json.state == 'success') { $imgHtml = '<span>'; $imgHtml += '<a href="' + json.file + '" target="_blank">'; $imgHtml += '<img src="' + json.file + '"/>'; $imgHtml += '</a>'; $imgHtml += '<a href="javascript:uploadifyRemove("' + json.file + '")">删除</a>'; $imgHtml += '</span>'; $($imgHtml).appendTo('#uploadfiles'); } else { alert(json.message); } }, 'onQueueComplete': function() { $('.upload_load').remove(); } }); }); </script>
参数说明
一、属性
属性名称
默认值
说明
上传文件的大小限制 ，如果为整数型则表示以KB为单位的大小，如果是字符串，则可以使用(B, KB, MB, or GB)为单位，比如'2MB'； 如果设置为0则表示无限制
auto
true
设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 。
buttonClass
”
按钮样式
buttonCursor
‘hand'
鼠标指针悬停在按钮上的样子
buttonImage
null
浏览按钮的图片的路径 。
buttonText
‘SELECT FILES'
浏览按钮的文本。
checkExisting
false
文件上传重复性检查程序，检查即将上传的文件在服务器端是否已存在，存在返回1，不存在返回0
debug
false
如果设置为true则表示启用SWFUpload的调试模式
fileObjName
‘Filedata'
文件上传对象的名称，如果命名为'the_files'，PHP程序可以用$_FILES['the_files']来处理上传的文件对象。
fileSizeLimit
0
fileTypeDesc
‘All Files'
这个属性值必须设置fileTypeExts属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileTypeDesc为“请选择rar doc pdf文件”
fileTypeExts
‘*.*'
设置可以选择的文件的类型，格式如：'*.doc;*.pdf;*.rar' 。
formData
JSON格式上传每个文件的同时提交到服务器的额外数据，可在'onUploadStart'事件中使用'settings'方法动态设置。
height
30
设置浏览按钮的高度 ，默认值
itemTemplate
false
用于设置上传队列的HTML模版，可以使用以下标签：
instanceID – Uploadify实例的ID
fileID – 列队中此文件的ID,或者理解为此任务的ID
fileName – 文件的名称
fileSize – 当前上传文件的大小
插入模版标签时使用格式如：${fileName}
method
Post
提交方式Post或Get
multi
true
设置为true时可以上传多个文件。
overrideEvents
设置哪些事件可以被重写，JSON格式，如：'overrideEvents' : ['onUploadProgress']
preventCaching
true
如果为true，则每次上传文件时自动加上一串随机字符串参数，防止URL缓存影响上传结果
progressData
‘percentage'
设置上传进度显示方式，percentage显示上传百分比，speed显示上传速度
queueID
false
设置上传队列容器DOM元素的ID，如果为false则自动生成一个队列容器。
queueSizeLimit
999
队列最多显示的任务数量，如果选择的文件数量超出此限制，将会出发onSelectError事件。
注意此项并非最大文件上传数量，如果要限制最大上传文件数量，应设置uploadLimit。
removeCompleted
true
是否自动将已完成任务从队列中删除，如果设置为false则会一直保留此任务显示。
removeTimeout
3
如果设置了任务完成后自动从队列中移除，则可以规定从完成到被移除的时间间隔。
requeueErrors
false
如果设置为true，则单个任务上传失败后将返回错误，并重新加入任务队列上传。
successTimeout
30
文件上传成功后服务端应返回成功标志，此项设置返回结果的超时时间
swf
‘uploadify.swf'
uploadify.swf 文件的相对路径。
uploader
uploadify.php
后台处理程序的相对路径。
uploadLimit
999
最大上传文件数量，如果达到或超出此限制将会触发onUploadError事件。
width
120
设置文件浏览按钮的宽度。
二、事件
事件名称
说明
onCancel(file)