正文
关于jquery文件上传插件 uploadify 3.1的使用
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
要使用uplaodify3.1,自然要下载相应的包,下载地址http://www.uploadify.com/download/,这里有两种包,一个是基于flash,免费的,一个是基于html5,需要付费,我这里所说的也是前一种。当然现在可能已经不再是3.1版本了,估计是3.2了。不过,差别不会太大!
首先在页面中引入一下文件:
<link rel="stylesheet" type="text/css" href="css/uploadify.css">
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="js/jquery.uploadify-3.1.js"></script>
<script type="text/javascript" src="js/jquery.uploadify-3.1.min.js"></script>
uploadify.swf要和css放在一起,不然会找不到。
jsp页面里:
<input type="file" name="uploadify" id="uploadify" value="浏览"/>
<div id="fileQueue" style="border-top: thin solid gray;"></div>
一下是我自己的页面的代码:
<script type="text/javascript">
$('#rightFrame').load(function(){
var account = $("#account").val();
var id= $("#userId").val();
var currentNode=0;
$("#uploadify").uploadify({
//注:这里uploadify为html标签,文件输入框id
swf: 'css/uploadify.swf',
uploader: 'uploadfile.action;',
cancelImg: '/images/uploadify-cancel.png',
buttonText:'选择文件',
fileObjName :'uploadify',
auto: true,
multi:true,
Debug:true,
queueID:'fileQueue',//这里fileQueue 为上传进度条显示在哪个div里
formData:{'account':account,'id':id,'currentNode':$("#rightFrame").contents().find("#test").val()},
removeCompleted:true,
queueSizeLimit:999,
fileSizeLimit:'100MB',
height:28,
width:90,
successTimeout:28,
requeueErrors:true,
uploadLimit:5,
onUploadSuccess: function (file, data, response) {
if(response)
{
currentNode=data;
}
},
onQueueComplete : function(stats){
window.parent.rightFrame.location.href="fileaction?filenode="+currentNode;
alert("上传完毕");
}
});
});
</script>
属性解释:
http://blog.sina.com.cn/s/blog_6d34781a01018149.html