Uploadifive 使用教程【结合七牛】
Uploadify是一个基于JQuery的多文件上传JS组件，高度定制，两个版本可供选择。flash版本在最新的Safari等不再支持flash的浏览器或者一些手机浏览器中就无法正常的加载使用，因此推荐使用html5版本！
优点：
- 支持多文件上传
- 支持进度条显示
- 支持拖拽上传
- 支持文件格式检查及大小限制
- 支持在文件上传的各个生命周期对文件进行处理
Uploadify两个版本一个为flash版（免费），一个为HTML5版（收费$5.00 USD，还有一个用户商业用途的就比较贵了）
基本使用：
环境要求： jQuery1.4或以上的版本；一个能解析php、asp.net等类似的服务器端脚本语言的服务器运行环境。
- 下载uploadifive压缩文件解压至你的项目目录
- 引入相关js、css文件:
<link rel="stylesheet" type="text/css" href="uploadifive.css"><script src="/jquery.js" type="text/javascript"></script><script src="jquery.uploadifive.js" type="text/javascript"></script>
- 页面中添加type="file"的一个input,并且指定id
<input id="file_upload" type="file" name="file_upload" /> - 初始化uploadfive，绑定到id为file_upload的input上
$(function() {
$('#file_upload').uploadifive({
//处理文件上传的服务器端脚本，可根据自己的项目环境修改
'uploadScript' : 'uploadifive.php'
// Put your options here
});
});
Options选项参数
对常用参数进行解释
- auto:是否自动触发上传 ，如果选择false需要手动触发通过调用：
$('#file_upload').uploadifive('upload') - buttonText:指定上传按钮文字
- checkScript:指定检查文件名是否重复的服务器端脚本
- dnd:是否允许拖动上传，如果为false则禁用拖动上传
- fileObjName:服务器端获取的文件对象的名称，如php的 $_FILES['fileObjName']
- fileSizeLimit:限制上传文件的大小【单位KB,MB,GB】
- fileType:上传文件类型：如图片 image/*，如果指定了类型限制，点击上传弹出的资源选择器中，非限定的文件类型将无法不选择
- formData:额外提交的表单数据可以在这个参数下指定
{'someKey' : 'someValue'} - height|width:上传按钮的宽度与高度只能通过这两个属性进行修改
- multi:是否多文件上传[true|false]
Events回调方法
- onAddQueueItem:当文件添加至上传队列中时触发此回调方法
$(function() {
$('#file_upload').uploadifive({
'uploadScript' : '/uploadifive.php',
'onAddQueueItem' : function(file) {
alert('The file ' + file.name + ' was added to the queue!');
}
});
});
- onCancle:当点击取消上传，从上传队列中移除文件对象时触发
$(function() {
$('#file_upload').uploadifive({
'uploadScript' : '/uploadifive.php',
'onCancel' : function() {
alert('The file ' + file.name + ' was cancelled!');
}
});
});
- onUpload:当调用upload方法手动触发上传是触发一次
- onUploadFile:在每个文件准备开始上传时触发一次【这个回调方法存在一个bug，见下文】
$(function() {
$('#file_upload').uploadifive({
'uploadScript' : '/uploadifive.php'
'onUploadFile' : function(file) {
alert('The file ' + file.name + ' is being uploaded.');
}
});
});
- onProgress:文件上传过程中不断的触发，因此你可以在此回调方法中定制你的上传进度等信息
$(function() {
$('#file_upload').uploadifive({
'uploadScript' : '/uploadifive.php'
'onProgress' : function(file, e) {
if (e.lengthComputable) {
var percent = Math.round((e.loaded / e.total) * 100);
}
file.queueItem.find('.fileinfo').html(' - ' + percent + '%');
file.queueItem.find('.progress-bar').css('width', percent + '%');
}
});
});
- onUploadComplete:文件上传完成时触发
回调参数 file:上传完的文件对象;data:服务器端（uplodify.php）返回的信息
$(function() {
$('#file_upload').uploadifive({
'uploadScript' : '/uploadifive.php'
'onUploadComplete' : function(file, data) {
alert('The file ' + file.name + ' uploaded successfully.');
}
});
});
- onFallback:初始化时检查浏览器是否支持HTML5
- onError:在文件添加到上传队列或者在上传的过程中发生错误的回调函数
errorType类型见官网文档
Methods直接调用的方法
- debug:比较有用的debug方法，可以在控制台打印出上传的相关信息
<a href="javascript:$('#file_upload').uploadifive('debug')">Debug</a>
与七牛结合直接上传文件到七牛云存储
注：上传到七牛需要对几个参数进行修改
- 七牛可以接受的fileObjName的名称是file
- 表单数据中必须包含上传token[token有服务器端返回]
- 表单数据中指定上传的key，作为七牛空间中存储的文件名
- uploadScript指定为:http://up.qiniu.com/
以上2，3两项数据的传递需要修改formData选项，如果是单个文件上传，这样是没有问题的，如果是多文件上传的情况，第一个文件正常上传成功，当上传第二个时，up.qiniu.com就会返回一个错误状态码614,即文件已存在。
最初是想在onAddQueueItem回调函数中修改formData中token和key的值，但是并没有得到想要的结果。查看请求到七牛的header中的表单信息的key值是一样的，所以，在文件加入队列中时进行修改表单formData只能触发一次，从源码中可以看到确实如此。
继续查看文档找到onUploadFile是在每个文件上传前触发，于是修改代码，调试发现此回调函数并没有被触发，查看源码毫无此回调函数调用的踪迹，于是加入如下代码到jquery.uploadfive.js的$data.uploadFile 的函数里的填充form表单数据之前379行，如下所示：
// Create a new FormData object
var formData = new FormData();
// Add the form data
formData.append(settings.fileObjName, file);
//trigger onUploadFile fucntion 看这里看这里看这里!!!
if (typeof settings.onUploadFile === 'function') {
settings.onUploadFile.call($this, file);
}
// Add the rest of the formData
for (i in settings.formData) {
formData.append(i, settings.formData[i]);
}
至此，多文件上传七牛与uploadfive的结合完成！
参考文档：uploadify官网文档html5版本
