EXTJS +SwfUpload+ashx 实现文件多选上传
根据项目要求，实现文件多选上传，单个文件上传 Extjs 有现成示例，多个文件选择上传，貌似js办不到，只能依据flash l了， 不多说，看代码，直接在Extjs 4.0.7 的window 示例中的layout例子，中添加多个文件上传对话框，
swfupload 控件 使用代码可查看官方示例
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Window Layouts Example</title>
<link rel="stylesheet" type="text/css" href="ext-4.0.7-gpl/resources/css/ext-all.css"/>
<!-- GC -->
<script type="text/javascript" src="ext-4.0.7-gpl/bootstrap.js"></script>
<script type="text/javascript" src="swfupload/swfupload.js"></script>
<script type="text/javascript" src="swfjs/swfupload.queue.js"></script>
<script type="text/javascript" src="swfjs/handlers.js"></script>
<script type="text/javascript" src="swfjs/layout.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="ext-4.0.7-gpl/examples/shared/example.css"/>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.x-panel-body p {
margin: 10px;
font-size: 12px;
}
</style>
</head>
<body>
<!-- EXAMPLES -->
<h1>Windows with Layouts</h1>
<p>This example shows how Ext containers can be nested in windows to create advanced layouts.</p>
<input type="button" id="show-btn" value="Layout Window"/><br/><br/>
<p>Note that the js is not minified so it is readable. See <a href="js/layout.js">layout.js</a> for the full source code.</p>
</body>
</html>
layout.js 代码
Ext.require([
'Ext.tab.*',
'Ext.window.*',
'Ext.tip.*',
'Ext.layout.container.Border'
]);
Ext.onReady(function () {
var UpDate=new Date;
var PformUpload = new Ext.form.FormPanel({
baseCls: 'x-plain',
labelWidth: 80,
// fileUpload: true,
// defaultType: 'textfield',
items: [
{
xtype:'textfield',
fieldLabel:'aa',
width:500,
id:'PUploadBumen',
name:'PUpbumen',
value:"yanli",
allowBlank:false,
readOnly:true
},
{
xtype:'textfield',
fieldLabel:'bb',
width:500,
id:'PUploadRen',
name:'PUpren',
value:"liyan",
allowBlank:false
},
{
xtype:'textfield',
fieldLabel:'提交日期',
width:500,
id:'PUpload_Date',
name:'PUp_Date',
value:UpDate.toLocaleString(),
allowBlank:false
},
{
xtype:'displayfield',
name:'Pdispalyfield2',
fieldLabel:'说明',
value:'<span style="color:red;">一次性最大文件上传个数900</span>'
},
{
html: "<div id='content'><div id='swfu_container' style='margin: 0px 10px;'><div><span id='spanButtonPlaceholder'></span><input id='btnCancel' type='button' value='取消上传' onclick='swfu.cancelQueue();' style='margin-left: 2px; font-size: 8pt; height: 22px;' /></div><div id='divFileProgressContainer' style='height: 75px;'></div><div id='thumbnails'></div></div></div>"
}
]
});
var swfu;
button = Ext.get('show-btn');
var win;
button.on('click', function () {
if (!win) {
win = Ext.create('widget.window', {
title: 'Layout Window',
closable: true,
closeAction: 'hide',
width: 600,
minWidth: 350,
height: 350,
layout:'fit',
bodyStyle: 'padding: 5px;',
items: PformUpload,
// html: "<div id='content'><div id='swfu_container' style='margin: 0px 10px;'><div><span id='spanButtonPlaceholder'></span><input id='btnCancel' type='button' value='取消上传' onclick='swfu.cancelQueue();' style='margin-left: 2px; font-size: 8pt; height: 22px;' /></div><div id='divFileProgressContainer' style='height: 75px;'></div><div id='thumbnails'></div></div></div>",
listeners: {
"afterrender": function () {
swfu = new SWFUpload({
// Backend Settings
upload_url: "../Pswfupload.ashx?bumen=kxs",
post_params: {
"ASPSESSID": "<%=Session.SessionID %>",
"renname":"张三"
},
// File Upload Settings
file_size_limit: "500 MB",
file_types: "*.dwg",
file_types_description: "CAD文件",
file_upload_limit: "0", // Zero means unlimited
// Event Handler Settings - these functions as defined in Handlers.js
// The handlers are not part of SWFUpload but are part of my website and control how
// my website reacts to the SWFUpload events.
file_queue_error_handler: fileQueueError,
file_dialog_complete_handler: fileDialogComplete,
upload_progress_handler: uploadProgress,
upload_error_handler: uploadError,
upload_success_handler: uploadSuccess,
upload_complete_handler: uploadComplete,
// Button settings
button_image_url: "images/XPButtonNoText_160x22.png",
button_placeholder_id: "spanButtonPlaceholder",
button_width: 160,
button_height: 22,
button_text: '<span class="button">选择dwg文件<span class="buttonSmall"></span></span>',
button_text_style: '.button {margin: 10px 30px 10px 10px; font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
button_text_top_padding: 1,
button_text_left_padding: 5,
// Flash Settings
flash_url: "swfupload/swfupload.swf", // Relative to this file
custom_settings: {
upload_target: "divFileProgressContainer",
cancelButtonId: "btnCancel"
},
// Debug Settings
debug: false
});
}
}
});
}
button.dom.disabled = true;
if (win.isVisible()) {
win.hide(this, function () {
button.dom.disabled = false;
});
} else {
win.show(this, function () {
button.dom.disabled = false;
});
}
});
});
后台ashx 代码
string CADfilepath = System.Configuration.ConfigurationManager.AppSettings["CADFilePath"];
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
HttpPostedFile jpeg_image_upload = context.Request.Files["Filedata"];
string path = "c:\\cc\\" + jpeg_image_upload.FileName;
jpeg_image_upload.SaveAs(path);
string tartget1 = "c:\\aa\\" + jpeg_image_upload.FileName;
File.Copy(path, tartget1, true);
context.Response.Write("Hello World");
注意点:该控件 一次性最多上传900个文件，并不是无限量，但大小无限制
