extjs多文件上传 -

279469669

浏览: 3568 次
性别:
来自: 青岛

最近访客更多访客>>

lv小可可

huanzhenjia

zhangshijun2012

我叫唐小余

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2011-10 ( 1)
更多存档...

extjs多文件上传

博客分类：

ExtJs

今天在做项目时遇到文件上传的问题，本想用SWFUpload这个东东来实现的，没想到在上传无法成功，折腾了一天也无果。

上网查，有的说是flash10的缘故，不过我也不能因为那东西就不做了啊，再说，如果浏览器不支持flash的话就不能上传，那也太次了……

于是乎，我又在网上搜寻着上传的插件，果然，被我发现了一个感觉不错的东西： Plupload。官方网站为http://www.plupload.com/ 网站上的例子很实用。而且支持令人头痛的IE6，真是爽撒~

效果附加在附件中。

另外遇到了加载外部页面的问题，因为用extjs 的默认加载是不支持的，于是用到了iframe，见代码：

var win = new Ext.Window({
    		title:'文件上传',
    		iconCls:'db-icn-upload-local',
    		width:700,
    		height:348,
    		layout:'fit',
    		//resizable:false,
    		style:'margin:0;padding:0;',
    		items:[{
    			title:'',
    			header:false,
    			html:'<iframe id="frame" name="frame" src="paper/upload.jsp" width=100% height=100%/>',
    			boder:false
    		}]
    	}).show();

upload.jsp代码为：

<%@ page language="java" contentType="text/html;charset=utf-8"%>
<html>
<head>
<!-- Load Queue widget CSS and jQuery -->
<link rel="stylesheet" type="text/css" href="../../plupload/js/jquery.plupload.queue/css/jquery.plupload.queue.css" />
<script type="text/javascript" src="../../plupload/js/browserplus-min.js"></script>
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../plupload/js/plupload.full.js"></script>
<script type="text/javascript" src="../../plupload/js/jquery.plupload.queue/jquery.plupload.queue.js"></script>

<script type="text/javascript">

$(function() {
	var result = true;
	var failCount = 0;
	$("#uploader").pluploadQueue({
		// General settings
		runtimes : 'html5,gears,flash,silverlight,browserplus',//支持环境，优先级为从左到右
		url : 'uploadFiles',//上传地址
		max_file_size : '100000mb',//设定上传文件最大尺寸
		//chunk_size : '1mb',
		unique_names : true,

		// Flash settings
		flash_swf_url : '../../plupload/js/plupload.flash.swf',

		// Silverlight settings
		silverlight_xap_url : '../../plupload/js/plupload.silverlight.xap',

		// Post init events, bound after the internal events
		init : {
			/*StateChanged: function(up) {
				alert("状态更新");
			},*/
			UploadComplete: function(up,file){
				if(result){
					alert("上传成功");
				}else{
					alert(failCount+"个文件上传失败");
				}
			},

			Error: function(up, args) {
				result = false;
				failCount++;
			}
		}
	});

	// Client side form validation
	$('form').submit(function(e) {
        var uploader = $('#uploader').pluploadQueue();
		uploader.bind('Refresh', function() {
                alert("sdfdfsdf");
            });
        // Files in queue upload them first
        if (uploader.files.length > 0) {
            // When all files are uploaded submit form
            uploader.bind('StateChanged', function() {
                if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                    $('form')[0].submit();
                }
            });
            
                
            uploader.start();
        } else {
            alert('至少选择一个文件上传。');
        }

        return false;
    });
});
</script>
</head>
<body>

<form action="uploadFiles">
	<div id="uploader">
		<p>您的浏览器不支持Flash, Silverlight, Gears, BrowserPlus 或者 HTML5 ，无法上传.</p>
	</div>
</form>

</body>
</html>