`

《Ext实战》节选：文件上传

EXTFlashJavaScriptCSSjson 
阅读更多

《Ext实战》节选：文件上传

转自：http://blog.csdn.net/tianxiaode/archive/2008/07/30/2742460.aspx

 

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的主要配置参数。

表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('

分享到：
| Jquery+ExtJS实现文件上传
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Ext3.0实现多文件上传.rar

    在“Ext3.0实现多文件上传.rar”这个压缩包中，我们聚焦于一个特定的功能：使用Ext3.0来实现实时的多文件上传功能。这个功能通常在网页应用中用于让用户能够一次性上传多个文件，如图片、文档等，极大地提高了用户...

    EXT实战EXT实战（自己网络整理的）

    EXT实战EXT实战EXT实战EXT实战EXT实战EXT实战EXT实战EXT实战EXT实战EXT实战EXT实战EXT实战EXT实战EXT实战

    ext实战EXTEXT

    EXT实战EXT实战EXT实战EXT实战EXT实战EXT实战EXT实战

    ext4.0 多文件上传

    标题"ext4.0 多文件上传"指的是在ext4.0文件系统中实现的多文件同时上传功能。ext4.0是Linux操作系统中的一个高级文件系统，它在ext3的基础上进行了优化，提高了性能并支持更大的文件系统容量。多文件上传则是指用户...

    深入浅出Ext_JS：数据存储与传输

    《深入浅出Ext_JS：数据存储与传输》 在Ext_JS框架中，数据管理是核心功能之一，它涉及数据的存储、传输以及与用户界面的交互。本篇将重点讲解Ext.data模块，包括其基本概念、主要组件以及如何进行数据的获取和处理...

    ext上传文件

    标题中的“ext上传文件”可能指的是使用EXTJS（一个JavaScript库）进行文件上传的功能。EXTJS提供了一套完整的用户界面组件，其中包括文件上传组件，它允许用户在Web应用中方便地上传文件。EXTJS通常与后端服务器...

    EXT文件批量上传源代码

    EXT文件批量上传源代码是一种基于EXT JavaScript库实现的前端文件上传解决方案。EXT是一个强大的富客户端JavaScript框架，它提供了丰富的组件库，用于构建交互性强、功能丰富的Web应用。EXT的文件批量上传功能允许...

    Ext上传文件例子(入门)

    本篇文章将聚焦于"Ext上传文件例子(入门)"，通过一个简单的实例来讲解如何在ExtJS框架下实现文件上传功能。 首先，我们要理解文件上传的基本原理。在Web应用中，文件上传通常依赖于HTML的`&lt;input type="file"&gt;`元素...

    Ext+Struts2多文件上传

    在本文中，我们将深入探讨如何使用ExtJS（Ext）与Struts2.0框架整合，实现多文件上传功能。这是一个常见的需求，在Web应用中，用户可能需要上传多个文件，如图片、文档等。通过理解这一过程，开发者可以构建更强大、...

    Ext 3.x 文件批量上传

    在本文中，我们将深入探讨如何在Ext 3.x框架中实现文件的批量上传功能。Ext 3.x是一款强大的JavaScript库，用于构建富客户端应用程序。它提供了丰富的组件和强大的数据管理功能，非常适合创建复杂的Web界面，包括...

    ext 文件上传

    "ext 文件上传"这个主题可能指的是EXTJS框架中的文件上传组件或者相关的扩展功能。EXTJS是一个流行的JavaScript库，用于构建富客户端应用程序，它提供了丰富的组件和强大的数据绑定机制。 在EXTJS中，文件上传通常...

    Ext上传文件 Demo

    本示例“Ext上传文件 Demo”聚焦于如何使用Ext JavaScript库与ASP.NET后端相结合来实现文件上传。下面将详细阐述相关知识点。 首先，Ext是一个强大的JavaScript框架，用于构建富客户端应用程序。它提供了丰富的组件...

    EXt3 的文件上传

    在"EXT3的文件上传"这一主题中，我们主要讨论的是如何在EXT3文件系统环境中进行文件上传，并且这个过程可能涉及到一个名为"Ext.ux.UploadDialog3.0"的插件。 在EXT2文件系统中，文件上传是通过标准的文件操作接口...

    upload_example, 使用Extbase和FAL文件上传.zip

    upload_example, 使用Extbase和FAL文件上传 使用Extbase和FAL在 TYPO3 6.2中上传 文件.. post:: :tags: TYPO3, Extbase项目：作者：blogpost: 贷方：用于 TYPO3

    Ext3.2 + struts 文件上传实例

    在本文中，我们将深入探讨如何使用Ext3.2与Struts框架实现文件上传功能，同时解决中文乱码问题。这两个技术结合在一起，可以为Web应用提供高效、稳定的文件上传解决方案。 首先，Ext3.2是一个JavaScript库，它提供...

    ext上传组件，可以多文件上传

    EXT上传组件是一款基于Flash技术的前端文件上传工具，它提供了多文件上传的功能，极大地提升了用户在上传文件时的体验和效率。EXT是一个流行的JavaScript库，主要用于构建富客户端应用程序，而EXT上传组件是EXT库的...

    Ext 文件上传参考文档

    Ext 文件上传参考文档主要涉及的是在Web开发中处理文件上传的场景，特别是使用ExtJS框架进行前端交互。ExtJS是一个强大的JavaScript库，用于构建复杂的、数据驱动的Web应用程序。文件上传是用户界面中的常见功能，...

    Ext2.0 文件上传组件

    "Ext2.0 文件上传组件"是一个用于Web应用程序的组件，它允许用户在浏览器中方便地上传文件。这个组件基于Ext JavaScript库的2.0版本，Ext是一个强大的前端开发框架，提供了丰富的用户界面组件和数据管理功能。在本文...

    ext多文件上传

    首先，EXTJS中的`Ext.form.Panel`组件是实现多文件上传的基础。我们需要创建一个包含`Ext.form.FileField`的表单，这是EXTJS中用于处理文件输入的组件。在`FileField`中，我们可以通过设置`multiple`属性为`true`来...

    Ext 实现 文件上传 进度显示

    `Ext`是一个流行的JavaScript框架，用于构建富客户端应用程序，而实现文件上传进度显示则为用户提供更好的用户体验。本篇文章将详细探讨如何利用`Ext`来实现文件上传的进度显示，并结合`commons-fileupload`库进行...

Magicbox
Global site tag (gtag.js) - Google Analytics