Uploadify Version 3.2的使用

php中文网
发布: 2016-06-07 15:17:54
原创
1166人浏览过

注:截至目前最新的版本是uploadify 3.2,注意在使用时看清楚版本,因为旧版本和新版本所提供的参数设置有很大差别。 1、引入Uploadify所需的JS及CSS文件 link id=easyuiTheme rel=stylesheet href=/js/uploadify/uploadify.css type=text/css/linkscript ty

注:截至目前最新的版本是uploadify 3.2,注意在使用时看清楚版本,因为旧版本和新版本所提供的参数设置有很大差别。

1、引入Uploadify所需的JS及CSS文件

<link id="easyuiTheme" rel="stylesheet" href="/js/uploadify/uploadify.css" type="text/css"></link>
<script type="text/javascript" src="/js/uploadify/swfobject.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/uploadify/jquery.uploadify.js" charset="utf-8"></script>
登录后复制
如上所示同时也要引入swfobject.js这个插件,最好使用最新的版本,当然,JQUERY的基础库那也是必须要引入的(jquery-1.8.0.min.js)
2、使用方法
$(function() {
		$("#documentfile").uploadify({                    
                     //请求路径,这里我请求的是struts2的action,但是在请求路径后加了.action,就无法提交。                   
                     'uploader': '${pageContext.request.contextPath}/uploads/control_projectDocument_addDocumentVersion',
			'swf':'${pageContext.request.contextPath}/js/uploadify/uploadify.swf',//引入uploadify提供的swf文件
			'cancelImg': 'js/uploadify/uploadify-cancel.png',//取消按钮
			'queueID': 'fileQueue',//文件选择后所要存放的容器
			'wmode' : 'transparent', 
			'debug' : false,//是否开启调试
			 'auto': false,//是否开启自动上传
             'multi': true,
             'fileObjName':'documentfile',//上传文件input type=file的名称
             'width':84,//宽度
             'height':24,//高度
             'buttonText':'',//改变上传按钮的文本
             'preventCaching':true,
             'removeTimeout':1,
             //不执行默认的onSelect事件
 	        'overrideEvents' : ['onDialogClose'],
 	        'fileTypeDesc':'支持的格式:', //在浏览窗口底部的文件类型下拉菜单中显示的文本
  	        'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png;*.bmp;*.swf;*.doc;*.txt;*.xls;*.ppt;*.pdf;*.xlsx;*.docx;*.pptx;*.mpp',//允许上传的文件后缀
	        'fileSizeLimit':'50MB',//上传文件的大小限制
	        'queueSizeLimit' : 5,//上传数量
	        'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {//每次更新上传的文件的进展
	             //利用这个方法可以自定义上传进度,
	             //使用方法见官方说明
	        },
	        //选择上传文件后调用
	        'onSelect' : function(file) {
	        },
	        //返回一个错误,选择文件的时候触发
	        'onSelectError':function(file, errorCode, errorMsg){
	            switch(errorCode) {
	                case -100:
	                	$.messager.alert('提示',"上传的文件数量已经超出系统限制的"+$('#documentfile').uploadify('settings','queueSizeLimit')+"个文件!");
	                    break;
	                case -110:
	                	$.messager.alert('提示',"文件 ["+file.name+"] 大小超出系统限制的"+$('#uploadify').uploadify('settings','fileSizeLimit')+"大小!");
	                    break;
	                case -120:
	                	$.messager.alert('提示',"文件 ["+file.name+"] 大小异常!");
	                    break;
	                case -130:
	                	$.messager.alert('提示',"文件 ["+file.name+"] 类型不正确!");
	                    break;
	            }
	        },
	        //检测FLASH失败调用
	        'onFallback':function(){
	            $.messager.alert('提示',"您未安装FLASH控件,无法上传图片!请安装FLASH控件后重启浏览器再试");
	        },
	        //上传到服务器,服务器返回相应信息到data里
	        'onUploadSuccess':function(file, data, response){
	        	$('#' + file.id).find('.data').html(' - 完成');
	        	$('#documentfile').uploadify('upload');
	        	var r = $
				.parseJSON(data);
	        	$.messager.show({
					msg : r.msg,
					title : '提示'
				});
	        }
		});
	});
登录后复制

3.所支持的表单

<div id="fileQueue" style="height:200px;background-color: #F5F5F5;overflow:auto;width: 347px;"></div>
登录后复制
<input type=file name="documentfile" style="display: none;"  id="documentfile"/>
登录后复制

4.在使用时,通常除了上传的文件外,还需传入其它参数可以使用settings属性进行设置

//在上传文件时,判断是否选择了文件
if($('#fileQueue').html()==""){
    alert('提示',"请先选择文件!");
}
//设置其它要传入后台的参数,格式如下
$('#documentfile').uploadify('settings', 'formData', { 
        'projectDocument.pid':$('#admin_xmwd_treegrid').propertygrid('getSelected').id,
        'version':$('#version').val()
});
$('#documentfile').uploadify('upload');//执行上传操作
登录后复制
到此位置,uploadify的基本使用就算完成。

uploadify3.2压缩包下载地址:下载Uploadify使用所需文件

Sveil开源商城
Sveil开源商城

Sveil开源商城是专业和创新的开源在线购物车的解决方案,是基于osCommerce 3 alpha 5 独立开发的项目。环境为PHP+MYSQL,使用了先进的AJAX技术和富互联网应用(RIA)的框架ExtJS,由Sveil.com提供重要的可用性改善及与网站交互界面速度更快,更高效。VERSION 1.0--修复bug1、网站在维护2、当搜索引擎被激活,与我们联系功能不起作用。3、当SEO被激

Sveil开源商城 6
查看详情 Sveil开源商城



最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号