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版本

秒客网