extjs多文件下传
日期：2014-05-16 浏览次数：20385 次
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>
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
