Uploadifive使⽤教程【结合七⽜】
Uploadify是⼀个基于JQuery的多⽂件上传JS组件，⾼度定制，两个版本可供选择。flash版本在最新的Safari等不再⽀持flash的浏览器或者⼀些⼿机浏览器中就⽆法正常的加载使⽤，因此推荐使⽤html5版本！
优点：
⽀持多⽂件上传
⽀持进度条显⽰
⽀持拖拽上传
⽀持⽂件格式检查及⼤⼩限制
⽀持在⽂件上传的各个⽣命周期对⽂件进⾏处理
Uploadify两个版本⼀个为flash版（免费），⼀个为HTML5版（收费$5.00 USD，还有⼀个⽤户商业⽤途的就⽐较贵了）
基本使⽤：
环境要求： jQuery1.4或以上的版本；⼀个能解析php、asp等类似的服务器端脚本语⾔的服务器运⾏环境。
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() {
javascript手机软件
$('#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 = und((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，作为七⽜空间中存储的⽂件名
jquery下载文件请求
4. uploadScript指定为:
以上2，3两项数据的传递需要修改formData选项，如果是单个⽂件上传，这样是没有问题的，如果是多⽂件上传的情况，第⼀个⽂件正常上传成功，当上传第⼆个时，up.qiniu就会返回⼀个错误状态码614，即⽂件已存在。
javascript产生随机数
最初是想在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 (UploadFile === 'function') {
git常用命令说明}
// Add the rest of the formData
for (i in settings.formData) {
formData.append(i, settings.formData[i]);
}
⾄此，多⽂件上传七⽜与uploadfive的结合完成！参考⽂档：uploadify

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。