`
maiguang
  • 浏览: 262437 次
  • 性别: Icon_minigender_1
  • 来自: 焦作
社区版块
存档分类
最新评论

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

EXTFlashJavaScriptCSSjson 
阅读更多

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);

                                    &nb

分享到：
| Java中如何打jar包
评论
1 楼 艾建锋 2009-07-14  
有没有选择文件夹的对话框？
发表评论

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

相关推荐

    EXTJS 多文件上传

    在EXTJS中，`MultiFileUploadField` 是一个组件，它允许用户在单个操作中选择并上传多个文件，极大地提升了用户交互体验。这个功能对于处理大量文件上传的场景非常有用，比如在内容管理系统、图像库或者文件分享平台...

    ExtJS原生多文件拖动上传组件

    ExtJS原生多文件拖动上传组件 使用时修改包路径 1.多文件上传 2.支持拖动上传 3.支持图片压缩 4.支持图片合并 5.文件排序 可扩展实时图片预览 api //初始化画板 initCanvas //上传文件窗口 uploadWindow //初始化...

    ExtJS4多文件上传，带进度条及管理

    本文将详细解析"ExtJS4多文件上传，带进度条及管理"这一主题，涵盖其核心概念、实现方式以及相关技术。 **一、ExtJS4概述** ExtJS4是Sencha公司推出的一个前端框架，它提供了丰富的组件库和强大的数据绑定机制，...

    ExtJS 6.2 实战 下载

    ExtJS 6.2 实战

    extjs 4.2 多文件上传

    用Ext编写的多文件上传组件，已封装。 支持多文件上传，文件下载，文件删除，

    Extjs4 swfupload 多文件上传

    在本文中，我们将深入探讨如何在ExtJS4框架中整合SWFUpload库，实现多文件上传功能。ExtJS4是一个强大的JavaScript组件库，用于构建富客户端应用，而SWFUpload则是一个流行的选择，用于在浏览器中实现文件上传，特别...

    ExtJS验证上传文件类型

    ExtJS 验证上传文件类型 ExtJS 中实现文件上传功能是非常方便的，但对于新手来说，控制文件上传类型是一个难题。例如，我们只想让用户上传特定的文件类型，例如txt文件，那么如何实现当用户上传非txt文件时，给出...

    ExtJS 多文件上传 UploadDialog For ExtJS3.x

    ### ExtJS 多文件上传 UploadDialog For ExtJS3.x #### 概述 在Web开发领域，特别是使用ExtJS框架进行界面设计时，文件上传功能是必不可少的一部分。然而，随着ExtJS版本的更新，原有的多文件上传组件可能不再兼容...

    能运行的ExtJs+Struts2文件上传

    学习这个项目，你可以了解如何在ExtJs中创建文件上传表单，如何配置Struts2的Action来接收文件，以及如何在服务器端处理上传的文件。此外，你还能了解到前端和后端之间如何通过Ajax进行通信，以及如何处理文件上传的...

    extjs 多文件上传

    在ExtJS中实现多文件上传功能，能够极大地提升用户体验，特别是在处理大量数据或文件时。本篇文章将详细探讨如何使用ExtJS实现多文件上传，并涵盖相关的关键知识点。 一、ExtJS 文件上传组件 在ExtJS中，我们可以...

    Extjs+java+swf多文件上传进度条显示项目

    标题中的“Extjs+java+swf多文件上传进度条显示项目”是一个综合性的Web开发实践，涉及到前端的用户界面、后端的数据处理以及文件上传过程中进度反馈的实现。这个项目利用了Extjs库来构建用户界面，Java作为服务器端...

    ExtJs开源项目：网络硬盘PHP版（附演示网址）

    在这个项目中，ExtJs可能被用来设计和实现文件和文件夹的管理界面，提供拖放操作、文件预览、多选、排序等功能。 PHP是一种广泛应用的服务器端脚本语言，常用于开发Web应用。在这个网络硬盘项目中，PHP可能负责处理...

    Extjs结合Asp.net文件上传

    标题中的“Extjs结合Asp.net文件上传”指的是在Web应用程序开发中，使用Ext JS（一个JavaScript库）和ASP.NET（Microsoft的服务器端技术）来实现文件上传功能。这一组合可以提供用户友好的界面和强大的后台处理能力...

    swf+Extjs+java多文件上传项目

    【标题】"swf+Extjs+java多文件上传项目"是一个基于SwfUpload插件、ExtJS前端框架和Java后端技术实现的文件批量上传解决方案。该项目旨在提供一种高效、用户友好的文件上传体验，适用于需要处理大量文件上传需求的...

    批量上传文件 EXTJS文件上传 上传组件

    EXTJS是一种基于JavaScript的前端框架，它提供了丰富的用户界面组件，包括用于文件上传的组件。在EXTJS中，实现批量上传文件是一项常见的需求，尤其在处理大量数据或媒体文件时。EXTJS的文件上传组件提供了方便的...

    ExtJs学习例子:多级联动下拉菜单演示例子

    前台采用ExtJs 2.2.1编写(由于库文件比较大，考虑到大家本机都有了,所以在此没有上传,大家直接改一下路径即可),后台采用asp+access编写(看文件名就知道了). 本例子演示的4级联动菜单:州+国家+城市+地区

    extjs多文件上传

    本文将深入探讨“extjs多文件上传”这一主题，结合标签“源码”和“工具”，我们将主要关注如何使用ExtJS库实现这一功能，并可能涉及第三方上传工具Plupload。 首先，ExtJS是一个基于JavaScript的UI框架，它提供了...

    Java+Extjs实现单文件上传

    本话题主要关注如何使用Java后端和ExtJS前端框架来实现单文件上传的流程。下面将详细讲解这个过程涉及的关键知识点。 首先，我们来看Java文件上传。在Java中，处理文件上传主要依赖于Servlet API中的`Part`接口，这...

    EXTJS3.0多文件上传组件

    综上所述，EXTJS3.0多文件上传组件结合了EXTJS的组件化开发优势和SWFUpload的多文件上传功能，为开发者提供了一个高效且易于定制的文件上传解决方案。通过深入理解和掌握相关知识点，可以开发出满足不同需求的多文件...

    Extjs4 swfupload多文件上传

    总的来说，"Extjs4 swfupload多文件上传"是一个结合了ExtJS4组件化开发能力和SwfUpload高级上传功能的解决方案。它提供了一个高效、可控的多文件上传体验，同时也考虑到了服务器安全和性能优化。对于需要开发复杂Web...

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