`
c_bai
  • 浏览: 35339 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

uploadify3.2+jquery 应用

阅读更多
uploadify是一个flash文件和一个基于jquery的JS文件构成。说白了就是用JS来控制的一个flash上传控件,上传效果感觉很不错。
下载uploadify的文件到指定目录 下载地址http://www.uploadify.com/download/

下载完插件后,只需要在自己的项目中引入对应的文件即可。

<link href="uploadify.css"    rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.uploadify.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>


然后在写相关代码,如:
$(function() {
	$("#uploadify").uploadify(
			{
	'swf' 			: 'js/uploadify.swf',
	'uploader' 		: 'uploadFile.action', // 上传到后台的处理类
	'cancelImg' 	: 'img/cancel.png', // 取消按钮的图片
	'fileObjName' 	: 'file', // 传到后台的对象名
	'queueID' 		: 'fileQueue',
	'fileSizeLimit' : '8589934592', // 限制文件上传的大小
	'buttonText' 	: '上传附件', // 按钮上的文字
	'auto' 	: false, // 是否自动上传
	'multi' 		: true, // 是否支持多文件上传
	'removeComplete' 	: false,
	'onUploadStart' : function(file) {							           
        $("#uploadify").uploadify(  'settings','uploader',			 
    'uploadFile.actiontitle='+$("#titles").val()+'&content='+$("#content").val());						},'onQueueComplete'     : function (queueData){
			 alert("上传完毕!");	 				   
		  }
});





               <td style="text-align: left;" colspan="2">
		  	<div id="fileQueue"></div>
			<input type="file" name="uploadify" id="uploadify"/>
			
		</td>






注意:
安装的时候涉及到的文件(uploadify.swf,uploadify.css,jquery.uploadify.min.js)路径一定要正确。

因为当时我自己就是因为路径的问题,一直渲染不到插件,还有就是自己电脑上要安装flash插件,要不然也会没有进度条。


中途中,我还碰到一个小问题:有的人他不想上传文件,只想把其它的文件框填完就可以了,
我是去判断 <div id="fileQueue"></div>里面是否有东西,如果选择了文件  <div id="fileQueue"></div> 肯定会有东西,如:




如果不想选择文件,用js 判断下

  if("" == document.getElementById("fileQueue").innerHTML)

这个也是一种方法啦,如果有更好的方法,也跟大家分享下。



分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics