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

最新推荐文章于 2021-03-04 01:59:25 发布

weixin_34259559

最新推荐文章于 2021-03-04 01:59:25 发布

阅读量142

点赞数

文章标签： javascript java git ViewUI

原文链接：https://my.oschina.net/js99st/blog/530159

版权

为什么80%的码农都做不了架构师？>>>

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参数。

转载于:https://my.oschina.net/js99st/blog/530159

weixin_34259559

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用uploadify3.2插件（flash版）上传文件

为什么80%的码农都做不了架构师？>>> ...
复制链接

扫一扫

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

“相关推荐”对你有帮助么？