《Ext详解与实践》节选:文件上传
Ext没提供上传组件?很多人都会有这疑问。
其实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的主要配置参数。
表2列出了SWFUpload的主要方法。
要使用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){
- fpfp.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 Proce***equest (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);
- }
- public bool IsReusable {
- get {
- return false;
- }
- }
- }
一个很简单的只接收单文件的服务器端代码。代码中使用了客户端设置的参数Filedata接受文件数据:
HttpPostedFile jpeg_image_upload = context.Request.Files["Filedata"];
|
先测试标准方式上传,在标题输入测试,然后单击“选择”按钮选择一幅图片,单击保存按钮。
图2是文件上传后的显示。
----------------------------
执行回调函数:success
返回值:{success:true,data:'文件“测试”上传成功,文件名:20080730174659265.jpg',file:'20080730174659265.jpg'}
|
《Ext详解与实践》节选:文件上传相关推荐
- [网络安全提高篇] 一〇九.津门杯CTF的Web Write-Up万字详解(SSRF、文件上传、SQL注入、代码审计、中国蚁剑)
这是作者网络安全自学教程系列,主要是关于安全工具和实践操作的在线笔记,特分享出来与博友们学习,希望您喜欢,一起进步.这篇文章主要介绍5月9日参加津门杯CTF题目知识,包括power_cut.hate_ ...
- 视图层详解,cbv和fbv,文件上传
day64 一.复习 二.视图层之请求对象 三.视图层之响应对象 补充知识之json序列化与反序列化 四.cbv和fbv 五.文件上传 六.postman软件 七.form表单,提交地址 八.Pych ...
- java ftp详解_Java实现FTP文件上传详解
import org.apache.commons.io.IOUtils; import org.apache.commons.net.ftp.FTPClient; import java.io.Fi ...
- 众望所归的《JAVASCRIPT凌厉开发--EXT详解与实践 》终于上市了!
大家好,我是这本书的策划编辑,经过努力,这本书终于上市了. 从创作开始,我们的目标就是写一本真正适合开发者参考和借鉴的EXT书,写作过程中,经过了无数次讨论和痛苦修订,感谢三位作者付出的艰辛劳动. 这 ...
- pscp使用详解 Win与Linux文件互传工具
pscp使用方法详解: pscp是putty安装包所带的远程文件传输工具,是一款十分常见windows与linux系统之间文件互传的工具,使用方法与linux中的scp相似,这里来介绍一些详细的使用方 ...
- 《JavaScript凌厉开发 Ext详解与实践》的目录
目 录 第1章 开篇.... 1 1.1 网络开发浪潮..... 2 1.2 RIA三足鼎立..... 2 1.2.1 Flex和OpenLaszlo.. 3 1.2.2 Faces客 ...
- SuseLinux详解(5)——安装上传下载工具lrzsz
目录 写在前面 1.下载 2.解压文件 3.进入目录 4.配置安装 5.建立软链接 6.测试 写在前面 Suselinux上默认没有安装上传 下载的工具,在zyyper源里面,也没有提供上传下载工具. ...
- 《Ext详解与实践》节选:自定义单元格的显示格式
有时候,需要在Grid中显示一个链接,或根据数字的大小显示不同的颜色,又或者使用固定格式显示记录编号等,这就需要自定义单元格的显示格式.在Ext的Grid可以很容易的实现自定义单元格的显示格式.在定义 ...
- 《JavaScript凌厉开发 Ext详解与实践》3月5日开始上架销售
书终于确定上架日期了,非常开心,多谢大家的支持! 转载于:https://www.cnblogs.com/wdpp/archive/2009/03/04/2386535.html
最新文章
- leetcode算法题--反转链表
- c++vector替换元素_从发展来看Vector与Hashtable的淘汰
- 如何区分ABS和PVC光纤槽道?
- 快递春节停运时间表刷屏,假的!但或涨价10-20元
- Web框架之Django_07 进阶操作(MTV与MVC、多对多表三种创建方式、前后端传输数据编码格式contentType、ajax、自定义分页器)
- VTK:PolyData之ClosedSurface
- DeepLink用法及源码解析
- python编程基础题答案_大学moocPython编程基础题目及答案
- The credentials you provided during SQL Server 2008 install are invalid
- Python应该怎么去练习和使用
- keras报错ModuleNotFoundError: No module named ‘keras.backend.tensorflow_backend‘;
- WebLogic的下载与安装(图文教程)
- java 线程 john_教你Java开发中多线程同步技巧
- c语言高级工程师试题,2020年.Net中高级开发工程师笔试题带答案(3)
- 解决ubuntu中zabbix 4.2图形显示乱码
- 树分解 宽度 如何分解 算法
- Mac环境变量配置(Java)
- python 移动平均法_移动平均法详解
- 再谈iOS视频播放器旋转视图开发
- 教你利用阿里云服务器搭建一个随时随地的Web IDE
热门文章
- OpenCV深度传感器depth sensors的实例(附完整代码)
- c++Insertion Sort插入排序的实现算法(附完整源码)
- C++用stack实现深度优先搜索DFS(附完整源码)
- C++BOOL,int,float,指针类型的变量a 与“零”比较语句
- QT的QTransform类的使用
- c语言for循环说课稿,C语言FOR循环说课稿.docx
- MySQL MMM多主多从搭建
- ack是什么,如何使用Ack机制,如何关闭Ack机制,基本实现,STORM的消息容错机制,Ack机制
- 数据库元数据数据字典查询_9_列出给定表的所有约束
- 检索数据_22_根据数据项的值排序