您的位置：首页 > 其它

使用uploadify3.2插件（flash版）上传文件

2015-11-13 00:00 399 查看
uploadify插件支持多文件上传、进度条，有flash版本和html5版本，这里的例子flash版本。需要提示的是，flash版本需要放在服务器访问才有效果，本地访问html文件是没效果的，我有一篇博文：js实现复制到剪切板，兼容所有浏览器，里面用的插件也有flash，也必须放在服务器才有效果（如果不是这个经验我调试uploadify的时候估计得费很多时间）。

uploadify官网：http://www.uploadify.com/，需要jquery.js的支持，uploadify的参数打开没有含有min的那个js里面就有英文解释，虽然是英文但绝不会漏信息。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上传demo</title>
<link rel="stylesheet" type="text/css" href="uploadify.css">
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.uploadify.min.js"></script>
<script type="text/javascript">
$(function() {
var $fileupload = $('#fileupload');
var $uploadBtn=$('#uploadBtn');
var $cancelBtn=$('#cancelBtn');
var $clearBtn=$('#clearBtn');

$fileupload.uploadify({
'auto' : false,
'multi' : true,
'buttonText' : '选择上传文件',
'fileSizeLimit' : '10MB',//上传文件大小限制
'formData':{'title':'这是标题','desc':'这是视频描述'}，
'fileTypeDesc' : '视频文件',
'fileTypeExts' : '*.avi; *.mp4; *.mov',//文件类型过滤
'swf' : 'uploadify.swf',//uploadify.swf的链接
'uploader' : 'http://www.baidu.com',//上传的链接，这里肯定是失败的！
//onUploadSuccess为上传完视频之后回调的方法
'onUploadSuccess' : function(file, data, response) {
alert("成功上传一个！");
}
});

$uploadBtn.click(function(){
$fileupload.uploadify('upload',"*");
});

$cancelBtn.click(function(){
$fileupload.uploadify('cancel');
});

$clearBtn.click(function(){
$fileupload.uploadify('cancel',"*");
});
});
</script>

</head>
<body>
<input type="file" id="fileupload" />
<input type="button" id="uploadBtn" value="点击上传" />
<input type="button" id="cancelBtn" value="取消当前上传" />
<input type="button" id="clearBtn" value="取消所有上传" />
</body>

如果不行就下载我的整个项目放进tomcat访问吧：http://git.oschina.net/jsc/UploadifyDemo

使用这个插件你可能会遇到一个问题，就是formData是请求参数，怎么自定义呢？例如我上面的例子中是写死的：

'formData':{'title':'这是标题','desc':'这是视频描述'}

你可能会弄成一个变量，但是这样是无用的！

应该这么办：

$uploadBtn.click(function(){
$fileupload.uploadify('settings', 'formData', "{'title':'新的标题','desc':'新的视频描述');
$fileupload.uploadify('upload',"*");
});

这样就能设置请求参数，而且它的规则是“有则覆盖，无则新增”！也就是说如果我写成：

$fileupload.uploadify('settings', 'formData', "{'tab':'这是视频标签'}");

还会保留原来的title和desc参数。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航