Uploadifive 使用教程【结合七牛】

Uploadify是一个基于JQuery的多文件上传JS组件，高度定制，两个版本可供选择。flash版本在最新的Safari等不再支持flash的浏览器或者一些手机浏览器中就无法正常的加载使用，因此推荐使用html5版本！

优点：

• 支持多文件上传
• 支持进度条显示
• 支持拖拽上传
• 支持文件格式检查及大小限制
• 支持在文件上传的各个生命周期对文件进行处理

Uploadify两个版本一个为flash版（免费），一个为HTML5版（收费$5.00 USD，还有一个用户商业用途的就比较贵了）

基本使用：

环境要求： jQuery1.4或以上的版本；一个能解析php、asp.net等类似的服务器端脚本语言的服务器运行环境。

1. 下载uploadifive压缩文件解压至你的项目目录
2. 引入相关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>
3. 页面中添加type="file"的一个input,并且指定id
   <input id="file_upload" type="file" name="file_upload" />
4. 初始化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|上传按钮的宽度与高度只能通过这两个属性进行修改
• 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>

与七牛结合直接上传文件到七牛云存储

注：上传到七牛需要对几个参数进行修改

1. 七牛可以接受的fileObjName的名称是file
2. 表单数据中必须包含上传token[token有服务器端返回]
3. 表单数据中指定上传的key，作为七牛空间中存储的文件名
4. 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版本