jquery 文件上传插件Uploadify 初探
愚盦 2014-07-19
最近使用了uploadify做文件上传,上传同时展示进度条，感觉简单方便，功能也叫完善，先记下来再说。
官方地址 http://www.uploadify.com/
提供了html5的版本和Flash的版本，html5的版本收费，所以使用的Flash版本，你懂的。。。
先来看下我的代码，看看uploadify使用有多简单、方便。。。
将下载的uploadify.zip解压，
这个文件需要在页面引用，当然jquery是肯定不能少了，如下是文件上传的html页面：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Uploadify</title>
<link href="/js/jquery.uploadify-v2.1.0/uploadify.css" rel="stylesheet" type="text/css" ></link>
<script src="/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript"
src="/js/jquery.uploadify-v2.1.0/swfobject.js"></script>
<script type="text/javascript"
src="/js/jquery.uploadify-v2.1.0/jquery.uploadify.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#uploadify").uploadify({
'auto' : false,//不自动上传
'multi':false,//不支持多文件上传
'uploader': '/uploadify',//文件上传地址，对应后台服务器的接受地址
'swf':'/js/jquery.uploadify-v2.1.0/uploadify.swf',//这个是Flash的文件选择插件
//上传成功后执行的方法
'onUploadSuccess':function(file,data,response){
alert(response);
alert(data);
}
});
});
</script>
</head>
<body>
<!-- <div id="fileQueue"></div> -->
<input type="file" name="uploadify" id="uploadify" />
<p>
<a href="javascript:$('#uploadify').uploadify('upload','*')">上传</a>|
<a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>
</p>
</body>
</html>
简单吧，只需要在页面有个file类型的input标签，在调用uploadify，就完事，uploadify就可以正常工作了。
现在我们来看看几个基本的参数都是什么意思：
auto 是否自动上传，自动上传是指选择文件后，必须要点上传按钮了
multi 是否可以同时选择多个文件
uploader 文件上传地址
swf Flash插件地址
onUploadSuccess 上传成功后执行的方法,其中data为服务器返回的数据
更多配置请参见 http://www.uploadify.com/documentation/
