日期:2014-05-16  浏览次数:20350 次

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>	
?