- 浏览: 216559 次
- 性别:
- 来自: 上海
-
文章分类
最新评论
-
henchong：
如果提示信息全是数字的话，是不会自动换行的，不知道这个该怎么解 ...
用ExtJs为表格单元格增加Tooltips浮动信息 -
李君寻：
自动换行,算是懂了
ColumnLayout的使用方法 -
icrwen：
楼主能解释下为啥要用air技术呢，是不是只用ext就可以了啊
extjs+air开发 -
wenniuwuren：
不能显示图片..
利用session实现一次性验证码 -
追风筝的孩子：
还是没有解决啊
com.ibatis.sqlmap.client.SqlMapException: There is no statement named 语句名 in thi
其实Ext.form.TextField就是Ext的上传组件的，只要将其配置参数inputType设置为"file"就行了。上传文件除了文件输入框，还有一个重要的设置，就是需要将form的enctype属性设置为"multipart/form-data"。这个也很简单，在定义FormPanel的时候加入BasicForm的配置参数fileUpload，并设置为true就行了。
在Ext中使用标准上传方式最大的缺点就是文件输入框的宽度很难控制，与界面不是太协调，而且在不同浏览器中的显示是不同的。在Ext官方论坛中有很多替代办法，笔者比较喜欢的是SWFUpload。
SWFUpload使用Flash作为上传组件，文件选择可以设置为单选，也可以设置多选，而且可以控制选择文件的类型。执行文件选择不依赖于标准文件输入框，可以使用按钮、链接等多种方式执行，从而可以根据需要设置界面。SWFUpload的提交不依赖Form，其模式类似于Ajax提交，可以很容易的实现对上传的控制和显示上传进度。
SWFUpload的官方地址是：http://www.swfupload.org/。
在SWFUpload中有两个主要对象：file和Stats。
file对象主要是保存文件的一些基本信息，其结构如下：
{
id : string, // SWFUpload 的文件编号，作为开始上传、取消上传的句柄
index : number, // 文件在上传队列中的索引
name : string, // 文件名，不包含路径
size : number, // 文件大小，单位为字节
type : string, // 文件类型
creationdate : Date, // 文件创建日期
modificationdate : Date, // 文件最后编辑日期
filestatus : number, // 文件状态
}
Stats对象主要提供上传队列中的信息，其结构如下：
{
in_progress : number // 1表示正在上传文件，0表示则不是
files_queued : number // 上传队列中的文件数量
successful_uploads : number // 已成功上传的文件数量
upload_errors : number // 上传失败的文件数量
upload_cancelled : number // 取消上传的文件数量
queue_errors : number // 触发了fileQueueError事件的文件数量
}
表1列出了SWFUpload的主要配置参数。
表1 SWFUpload的主要配置参数
参数
类型
描述
upload_url
字符串
文件上传地址
flash_url
字符串
SWFUpload使用的flash文件的绝对地址或相对地址
file_size_limit
字符串
限制上传文件的大小
格式为：值+单位
允许的单位有B、KB、MB和GB。如果不设置单位，则默认单位为KB
如果设置为0则无限制
file_upload_limit
数字
允许上传的文件数量，该值表示的是在上传页面没有被销毁前允许上传的文件数量。默认值为0，表示没有限制
file_queue_limit
数字
在一次上传过程中允许上传的文件数量，默认值为0，表示无限制
file_types
字符串
限制上传文件的类型。使用分号分隔各类型
例如："*.jpg;*.gif"表示只允许上传扩展名为JPG和GIF的文件
file_post_name
字符串
服务器端接收文件的变量名，本属性只在Flash 9版本有效
requeue_on_error
布尔值
设置为true则当文件上传错误时重新返回队列等待上传，设置为false则不再上传
post_params
对象
JSON格式的与文件一起上传的参数，Flash 8版本不支持
file_types_description
字符串
在文件选择对话框显示的文本描述
flash_color
颜色值
设置包含flash的HTML标签的背景颜色，默认值是"#FFFFFF"
debug
布尔值
设置为true则显示调试
file_queued_handler
函数
当选择文件对话框关闭时执行该函数，函数会传入一个file对象
upload_start_handler
函数
文件开始上传时执行该函数，函数会传入一个file对象
upload_progress_handler
函数
通过该函数显示上传进度，函数传入一个file对象与文件已上传的字节数
upload_success_handler
函数
单个文件上传成功时执行该函数，函数传入一个file对象与服务器端返回的信息
upload_error_handler
函数
单个文件上传失败或中断时执行该函数，函数传入一个file对象、错误代码与错误信息
file_queue_error_handler
函数
文件未能加入队列时执行该函数，函数传入一个file对象、错误代码与错误信息
表2列出了SWFUpload的主要方法。
表2SWFUpload的主要方法
方法
描述
selectFile
功能：打开选择文件对话框，但允许选择一个文件
语法：selectFile()
参数： 无
返回值：无
例子：swfu.selectFile()
selectFiles
功能：打开选择文件对话框，允许选择多个文件
语法：selectFiles()
参数： 无
返回值：无
例子：swfu.selectFiles()
startUpload
功能：开始上传文件
语法：startUpload ([file_id])
参数：
file_id：可选值，要上传的文件编号，如果不设置则上传队列里的第一个文件
返回值：无
例子：swfu.startUpload ()
cancelUpload
功能：取消上传某个文件
语法：cancelUpload ([file_id])
参数：
file_id：可选值，要取消上传的文件编号，如果不设置则上传队列里的第一个文件取消上传
返回值：无
例子：swfu.cancelUpload ()
stopUpload
功能：中止上传
语法：stopUpload ()
参数： 无
返回值：无
例子：swfu.stopUpload ()
getStats
功能：返回当前上传状态
语法：getStats ()
参数： 无
返回值：stats对象
例子：vat stats=swfu.getStats ()
setPostParams
功能：设置提交的附加参数
语法：setPostParams(param_object)
参数：
param_object：一个JSON对象
返回值：无
例子：swfu. setPostParams({id:1,title:'标题'})
该例子附加了两个提交参数，一个为id，值为1，一个为title，值为标题
要使用SWFUpload，需要在页面加载swfupload.js文件并设置好参数，尤其要注意Flash文件的路径。具体使用方法请看下面例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html debug='true'>
<head>
<title>上传文件</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../lib/ext/ext-base.js"></script>
<script type="text/javascript" src="../lib/ext/ext-all.js"></script>
<script type="text/javascript" src="../lib/ext/radiogroup.js"></script>
<script type="text/javascript" src="../lib/ext/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="swfupload.js"></script>
</head>
<body>
<h1 style="margin:20px 0px 0px 20px;">第4章 上传文件</h1>
<br />
<div style="padding-left:20px;">
<p>
<div id="form1"></div><br>
<div >执行操作：</div>
<textarea id='op' rows="10" style="width:800px;"></textarea>
</p>
<br />
</div>
<script>
var app={};
var swfu;
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'under';
swfu=new SWFUpload({
upload_url : "upload.ashx",
flash_url : "swfupload_f9.swf" ,
file_size_limit : "10240",
file_types : "*.jpg;*.gif",
file_post_name : "Filedata",
requeue_on_error : false,
post_params : {},
file_types_description:'图片',
flash_color : "#FFFFFF",
file_queued_handler : function(file){
var filetype=(file.type.substr(1)).toUpperCase();
if(filetype=='JPG' | filetype=='GIF'){
swfu.startUpload();
}else{
Ext.Msg.alert('错误','只能上传JPG或GIF格式文件')
}
},
upload_start_handler:function(file){Ext.Msg.progress('上传文件','正在上传文件：'+file.name,'0%');return true;},
upload_progress_handler:function(file,bytesloaded){
var percent = Math.ceil((bytesloaded / file.size) * 100);
Ext.Msg.updateProgress(percent/100,percent+'%');
},
upload_success_handler:function(file, server_data){
var msg=Ext.decode(server_data);
if(msg){
if(msg.success){
Ext.getCmp('imagePane').body.dom.innerHTML="<img width='100' src='upload/"+msg.file+"'>"
Ext.get('op').dom.value+="----------------------------\n"
+"执行回调函数：success\n"
+"返回值："+server_data+'\n';
var stats=swfu.getStats();
if(stats.files_queued>0)
swfu.startUpload();
Ext.Msg.hide();
}else{
Ext.Msg.alert('错误',msg.msg);
}
}else{
Ext.Msg.alert('错误','上传错误！')
}
},
upload_error_handler:function(file,error_code,message){
Ext.Msg.alert('错误','上传文件"'+file.name+'"发生错误。<br>错误代码：'+error_code+'<br>'+'错误信息：'+message);
},
file_queue_error_handler:function(file,error_code,message){
switch (error_code) {
case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
Ext.Msg.alert('错误',"文件不允许超过300k！<br> 文件名: " + file.name + "<br> 大小: " + file.size );
break;
case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
Ext.Msg.alert('错误',"不允许上传0字节文件！<br> 文件名: " + file.name + "<br> 大小: " + file.size );
break;
case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
Ext.Msg.alert('错误',"已超出上传文件数量！<br> 文件名: " + file.name + "<br> 大小: " + file.size );
break;
case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
Ext.Msg.alert('错误',"不允许上传该类文件！<br> 文件名: " + file.name + "<br> 大小: " + file.size );
break;
default:
Ext.Msg.alert('错误',"发生未知错误，错误代码:"+error_code+"！<br> 文件名: " + file.name + "<br> 大小: " + file.size );
break;
}
}
});
var frm = new Ext.form.FormPanel({
applyTo: "form1",
width: 400,
height:300,
frame: true,
labelWidth:80,
labelSeparator:"：",
title:'上传文件',
fileUpload:true,
items:[
{
xtype:'textfield',
name:'title',
fieldLabel:'标题',
anchor:'-30',
allowBlank:false
},
{
xtype:'textfield',
name:'Filedata',
fieldLabel:'文件',
anchor:'-30',
allowBlank:false,
inputType:'file'
},
{layout:'column',border:false,items:[
{columnWidth:.4,border:false,items: [
{
xtype:'button',
text:'上传文件',
handler:function(){
swfu.setPostParams({title:frm.form.findField("title").getValue()});
swfu.selectFile();
}
}
]},
{columnWidth:.1,border:false,items: [
{xtype:'panel',html:' ',height:26,border:false}
]},
{columnWidth:.4,layout: 'form',border:false,items: [
{
xtype:'button',
text:'上传多个文件',
handler:function(){
swfu.setPostParams({title:frm.form.findField("title").getValue()});
swfu.selectFiles();
}
}
]}
]},
{
xtype:'panel',
id:'imagePane',
bodyStyle:'padding:5px',
html:' ',
height:120,
width:120
}
],
buttons: [{
text: '保存',
scope:this,
handler:function(){
if(frm.form.isValid()){
frm.form.doAction('submit',{
waitTitle:'上传文件',
waitMsg:'正在上传文件……',
url:'upload.ashx',
method:'post',
params:'',
success:function(form,action){
Ext.getCmp('imagePane').body.dom.innerHTML="<img width='100' src='upload/"+action.result.file+"'>"
Ext.get('op').dom.value+="----------------------------\n"
+"执行回调函数：success\n"
+"返回值："+Ext.encode(action.result)+'\n';
},
failure:function(form,action){
Ext.get('op').dom.value+="----------------------------\n"
+"执行回调函数：failure\n"
+"返回值："+Ext.encode(action.result)+'\n';
}
});
}
}
},{
text: '取消',
scope:this,
handler:function(){frm.form.reset();}
}],
listeners:{
render:function(fp){
fp.form.waitMsgTarget = fp.getEl();
}
}
});
})
</script>
</body>
</html>
例子中使用了两种方式实现文件上传，一种是标准方式，使用Form提交，一种使用SWFUpload。
标准方式的定义比较简单，在FormPanel定义中加入fileUpload参数并设置为true，然后将一个TextField的inputType设置为file就行了。保存的提交方式与一般的Form提交没什么区别。
SWFUpload的定义稍微复杂一点。首先在onReady函数外定义了一个swfu的全局变量，主要目的是使swfu成为一个全局的SWFUpload实例，以便在内部函数中能使用该实例。
本例子使用的Flash 9版本，而且swf文件与页面文件在同一目录，所以设置flash_url为swfupload_f9.swf。允许上传的文件大小限制为10兆，只能上传JPG和GIF文件，服务器端接收文件的参数名称为Filedata。
在file_queued_handler函数中先判别上传文件的扩展名是否符合要求，如果符合则执行startUpload方法开始上传文件。
upload_start_handler函数在文件开始时显示一个Ext进度条。
upload_progress_handler函数则根据已上传字节数计算上传进度并更新进度条。
upload_success_handler函数根据服务器端返回信息更新页面显示，并判断上传队列中是否还有文件未上传，如果有则继续上传。
upload_error_handler函数与file_queue_error_handler函数则在发生错误时显示错误信息。
在FormPanel中有两个按钮，一个用来演示上传单文件，一个用来演示上传多文件。单击后先根据标题输入框的值，设置一个附加提交参数title，然后执行selectFile方法或selectFiles方法打开文件选择对话框。对话框关闭后执行file_queued_handler函数开始上传文件。
文件上传后会在id为"'imagePane'"的Panel显示上传图片的缩略图。执行操作中也会显示返回的结果。
下面看看服务器端代码如下：
<%@ WebHandler Language="C#" Class="upload" %>
using System;
using System.Web;
using System.Collections;
using System.IO;
using System.Data.Common;
using System.Data;
public class upload : IHttpHandler {
public void ProcessRequest (HttpContext context) {
string outputStr = "{success:false,data:''}";
HttpPostedFile jpeg_image_upload = context.Request.Files["Filedata"];
string title= context.Request.Form["title"];
string original_fielname = jpeg_image_upload.FileName.ToLower();
string extname=original_fielname.Substring(original_fielname.LastIndexOf(".")+1,3);
if (extname == "gif" | extname == "jpg")
{
try
{
string path = context.Server.MapPath("./upload");
DateTime dt = DateTime.Now;
string newFilename = dt.ToString("yyyyMMddHHmmssfff")+"."+extname;
jpeg_image_upload.SaveAs(path+"\\"+newFilename);
outputStr = string.Format("{{success:true,data:'文件"{0}"上传成功，文件名：{1}',file:'{1}'}}",title,newFilename);
}
catch(Exception e)
{
outputStr = string.Format("{{success:false,data:'{0}'}}",e.Message);
}
}
else
{
outputStr = "{success:false,data:'错误的文件类型！'}";
}
context.Response.Write(outputStr);
}
评论
发表评论
-
extjs+air开发
2009-06-24 21:41 3032一、准备工作 1、下载adobe air install和ad ... -
带复选框(checkbox)的树
2009-03-20 15:05 1865该例子可以满足我们的一般需求。很多时候我们需要用到带check ... -
ExtJs中解决IE的min-width问题
2009-02-27 22:14 787当使用了ExtJs后，脚本documentElement.cl ... -
Ext中的动画处理
2009-02-27 22:13 1179CartoonExt.js //图片宽 var WIDTH=3 ... -
Ext.Ajax
2009-02-27 22:12 1196其实Ext.Ajax的使用并不 ... -
使用百分比设置GridPannel宽度的方法
2009-01-14 15:03 1658使用过Ext的Gird(网格)功 ... -
巧妙运用NumberField
2009-01-14 15:02 4588巧妙运用NumberField: 只允许字段输入数字. v ... -
Ext.ux.TabCloseMenu插件的使用
2009-01-14 14:59 1579tab在ext里很常用，在点开N个tab后，是否能通过右键菜单 ... -
直接在页面上显示富文本编辑器
2009-01-14 14:58 3288<html> <head> ... -
带右键菜单的树
2009-01-14 14:58 1205ext树形菜单加上右键菜单是不是很酷，ext当然也能实现。 树 ... -
EXT 二级联动下拉列表
2009-01-14 14:57 2579page.html代码如下 <!DOCTYPE HTM ... -
带搜索功能的grid分页实例
2009-01-09 13:43 1573本实例将在带分页的表格基础上进行扩展，增加搜索功能。由于本实例 ... -
带分页的表格
2009-01-09 13:43 1041主要介绍如何使用ext的表格控件实现ajax分页。 上一节讲了 ... -
树形下拉框
2009-01-09 13:43 2582<!DOCTYPE HTML PUBLIC " ... -
支持手写输入及联想功能的下拉框
2009-01-09 13:42 2898<!DOCTYPE HTML PUBLIC " ... -
让ext项目步入对象化编程
2009-01-09 13:39 838对于一些刚刚接触javascript的人来说大部分都在使用面向 ... -
grid的继承类，构建方便的grid操作
2009-01-09 13:13 1452在以往建立grid的时都要 ... -
ext异步加载树的子节点
2009-01-09 13:12 1979<script> Ext.o ... -
可拖拽的tree实际应用
2009-01-09 12:54 1818ext提供的树本身就有拖 ... -
可直接编辑节点的tree
2009-01-09 12:03 1708其实代码并不是很复杂，只是在原有的树形添加一个TreeEdit ...
相关推荐
总结起来，"ext struts2 swfupload 跨域文件上传"是关于如何使用EXTJS构建前端界面，结合Struts2处理服务器端逻辑，利用SwfUpload的跨域能力实现文件上传的一种解决方案。这个过程中涉及的技术包括JavaScript编程、...
总结来说，这些文件覆盖了EXT API的基础到进阶内容，包括EXT库的使用、组件开发、事件处理、多文件上传以及开发工具的使用，是全面学习EXT和SWFUpload的宝贵资源。通过深入学习和实践，开发者可以构建出功能强大、...
总之，`Ext2`和`SwfUpload`的组合为开发者提供了一个强大且灵活的文件上传解决方案，能够满足现代Web应用的需求。通过熟练掌握这两个工具，开发者可以创建出具有专业级功能和交互效果的文件上传组件，提升应用的整体...
本文将深入探讨如何使用EXTJS（EXT）框架与SWFUpload插件相结合，实现高效、便捷的多选文件上传功能。 EXTJS是一个强大的JavaScript前端框架，提供了丰富的组件和灵活的布局管理，可以构建出美观且功能丰富的用户...
Swfupload则是一个Flash基的文件上传插件，它支持多文件选择和上传，同时还提供了文件上传进度显示的功能。由于Flash在浏览器中的广泛支持，Swfupload在过去是实现多文件上传的流行解决方案。在我们的组件中，...
SwfUpload 是一款强大的前端文件上传插件，尤其适用于处理多文件上传的需求。它利用了Flash技术，能够提供友好的用户界面，并且在兼容性方面比HTML5的File API更为广泛，尤其是在老版本的浏览器中。本文将深入探讨...
总的来说，这个例程结合了`Ext2`的UI组件和`SWFUpload`的文件上传能力，提供了一种在Web应用中实现高级图片上传对话框的方法。理解并掌握这两个技术，对于开发具有高质量用户体验的文件上传功能是非常有帮助的。在...
Ext 文件上传参考文档主要涉及的是在Web开发中处理文件上传的场景，特别是使用ExtJS框架进行前端交互。ExtJS是一个强大的JavaScript库，用于构建复杂的、数据驱动的Web应用程序。文件上传是用户界面中的常见功能，...
总之，"Ext 文件上传 Icons"涉及了使用ExtJS和SWFUpload实现文件上传，以及通过DataView组件展示带有图标信息的已上传文件列表。理解并熟练运用这些知识点，可以让我们构建出功能完善、用户体验优秀的文件上传系统。...
Swfupload是一个基于Flash的文件上传插件，它允许用户在后台批量上传文件，支持进度条显示，提高了文件上传的用户体验。Swfupload利用Flash的技术特性，可以绕过浏览器的一些限制，比如对文件大小和数量的限制，从而...
SwfUpload则是一个流行的Flash插件，它允许用户在不刷新页面的情况下实现多文件上传，提供了优秀的用户体验。 EXT JS 3.4中的上传功能主要通过其组件系统来实现，特别是`Ext.form.FileField`（也称为上传字段）或`...
在IT行业中，SwfUpload 和 Ext2 是两种非常重要的前端和后端技术，它们经常被结合使用以提供高效、用户友好的文件上传功能。在这个“swfupload+ext2”项目中，我们看到它们与Struts2框架集成，以实现一个完整的Web...
EXTJS是一个流行的JavaScript库，用于构建富客户端应用，而SWFUpload则是一个基于Flash的文件上传插件，它允许用户在不刷新页面的情况下进行多文件上传。这种组合提供了用户友好的界面和高效的数据传输能力。 EXTJS...
`Ext.ux.SwfUploadPanel.js`是这样一个基于ExtJS和SwfUpload技术的插件，它实现了多文件上传的功能。这篇文章将深入探讨这个插件的工作原理、主要特点以及如何在实际项目中应用。 首先，`ExtJS`（全称为EXT ...
总结一下，`swfUpload`与`ExtJs`的结合使用，能够帮助开发者创建功能强大的文件上传和下载功能，特别是在需要兼容旧版浏览器的场景下。通过自定义组件或扩展`Ext.form.field.File`，我们可以将`swfUpload`的特性无缝...
SwfUpload 是一个开源的JavaScript库，用于实现高级的文件上传功能。它通过Flash插件在浏览器中提供了一种富用户体验，支持多文件选择、文件预览、进度条显示等功能。在本项目中，SwfUpload 被与ExtJS框架结合使用，...
在本文中，我们将深入探讨如何使用ExtJS的UploadDialog插件与Struts2.0框架相结合，实现一个功能完备的多文件上传功能。这是一项在Web应用开发中常见的需求，对于用户交互性和数据管理有着重要作用。 首先，让我们...
SWFUpload是一款经典的JavaScript与Flash相结合的文件上传组件，它在.NET环境中被广泛使用，尤其适合处理批量上传的需求。这个"SWFUpLoad DEMO"是.NET开发者学习和使用SWFUpload的一个实例，通过VS2010或VS2012这样...
在本文中，我们将深入探讨如何使用ExtJS实现多文件上传功能，而不依赖于SWFUpload插件。ExtJS是一款强大的JavaScript框架，它提供了丰富的组件和API，使得在Web应用程序中构建复杂的用户界面变得轻松易行。多文件...
3. **上传插件**：为了实现多文件上传，可能使用了第三方插件，如SWFUpload或Plupload。这些插件通过Flash或HTML5技术处理文件选取和上传过程，提供进度条和取消上传等高级功能。 4. **服务器端处理**：在后台，...