`

Extjs uploadDialog

    博客分类:
  • ext
阅读更多

Extjs里文件上传需要扩展的组件,自己在做extjs例子,没有什么好的方法,网上找的也有很多不同的方法,我用的是Ext.ux.UploadDialog。
在文件里引用

xml 代码
 
  1. <script type="text/javascript" src="lib/extjs.ux/Ext.ux.UploadDialog.js" ></script>  
  2. <script type="text/javascript" src="lib/extjs.ux/Ext.ux.ProgressBar.js" ></script>  
  3. <link rel="stylesheet" type="text/css" href="css/Ext.ux.ProgressBar.css"/>  
  4. <link rel="stylesheet" type="text/css" href="css/Ext.ux.UploadDialog.css"/>  

然后在js的代码里加入:

js 代码
 
  1. var dialog = new Ext.ux.UploadDialog.Dialog(null, {  
  2.           autoCreate: true,  
  3.           closable: true,  
  4.           collapsible: false,  
  5.           draggable: true,  
  6.           minWidth: 400,        
  7.           minHeight: 200,  
  8.           width: 400,  
  9.           height: 350,  
  10.           permitted_extensions:['JPG','jpg','jpeg','JPEG','GIF','gif'],  
  11.           proxyDrag: true,  
  12.           resizable: true,  
  13.           constraintoviewport: true,  
  14.           title: '文件上传',  
  15.           url: 't_file_upload.php',  
  16.           reset_on_hide: false,  
  17.           allow_close_on_upload: true  
  18.         });  

在上传按钮单击时弹出上传对话框:

js 代码
 
  1. btnUpload.on("click",function(){  
  2.                         dialog.show();  
  3.                     });  

下面要做的事情就是在t_file_upload.php这个文件里面来处理上传后的操作了:

java 代码
 
  1. <?php  
  2.     $file = "";  
  3.     $result = array();  
  4.     $ext = strrchr($_FILES["file"]["name"],'.');  
  5.     $file = "". date("YmdHis") . $ext;        
  6.     if(move_uploaded_file($_FILES["file"]["tmp_name"],"images/upload/" . $file)){  
  7.         $result = array('success'=>true,data=>$file);  
  8.     }else{  
  9.         $result = array('success'=> false, 'error'=> '文件上传错误');  
  10.     }                 
  11.     echo json_encode($result);    
  12. ?>  
上传文件的内容就是file,是规定好的:)

分享到:
评论

相关推荐

    ExtJs文件上传组件(UploadDialog)

    在ExtJS中,UploadDialog是一个专为文件上传设计的组件,它提供了用户友好的界面,允许用户选择并上传多个文件到服务器。这篇博客文章(虽然链接无法直接访问,但我们可以根据已知信息推测内容)可能详细介绍了如何...

    Ext.ux.UploadDialog.zip

    这个"Ext.ux.UploadDialog.zip"压缩包包含了EXTjs的UploadDialog组件,方便开发者在自己的项目中直接使用。 UploadDialog组件的核心功能是提供一个用户友好的界面,让用户能够选择并上传文件到服务器。这个组件通常...

    struts+extjs实现UploadDialog

    在"struts+extjs实现UploadDialog"这个主题中,我们主要讨论如何利用Struts和ExtJS来创建一个文件上传对话框。UploadDialog通常是一个交互式的用户界面,允许用户选择本地文件并将其上传到服务器。 首先,让我们从...

    ExtJS 多文件上传 UploadDialog For ExtJS3.x

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

    使用ExtJs的插件UploadDialog+struts2.0实现多文件上传

    在本文中,我们将深入探讨如何使用ExtJS的UploadDialog插件与Struts2.0框架相结合,实现一个功能完备的多文件上传功能。这是一项在Web应用开发中常见的需求,对于用户交互性和数据管理有着重要作用。 首先,让我们...

    extjs.ux.uploaddialog

    "extjs.ux.uploaddialog"是专门为ExtJS设计的一个上传对话框组件,它允许用户在一个对话框界面中方便地上传文件。 UploadDialog组件的核心功能在于提供一个交互式的文件选择和上传界面,通常包含文件选择按钮、文件...

    ExtJS实现多文件上传UploadDialog For ExtJS3.x

    最后,在ExtJS中创建`UploadDialog`实例,配置好URL、参数、回调函数等,这样当用户选择文件并点击上传按钮时,就会触发Struts2 Action的执行,从而实现多文件上传。 综上所述,实现ExtJS 3.x的多文件上传功能,...

    Ext UploadDialog For Ext3.2.1 附使用示例

    在ExtJS 2.x版本中,UploadDialog已经被广泛使用,但随着版本升级,对于ExtJS 3.2.1这样的较新版本,官方并未发布专门的UploadDialog组件。这导致了开发者在寻找适合3.x系列的UploadDialog时面临困难,因为非官方的...

    UploadDialog3_x 下载

    `UploadDialog3_x`组件就是这样一个解决方案,专为Ext框架设计,旨在提供高效且用户友好的批量上传体验。Ext是一个强大的JavaScript应用程序框架,它提供了丰富的UI组件和数据管理工具,使得开发者能够构建复杂的Web...

    jSP+EXTJS实现upload

    在IT行业中,网页开发经常会遇到文件上传的需求,而"jSP+EXTJS实现upload UploadDialog"就是一种常见的解决方法。这个话题主要涵盖了两个关键部分:JavaServer Pages (JSP) 和 ExtJS,它们共同用于创建一个具有文件...

    Ext.ux.UploadDialog下载及中文包(i18n)

    Ext.ux.UploadDialog是一款在ExtJS框架下使用的扩展组件,它提供了一种用户友好的文件上传界面和功能。这个组件通常被用于Web应用程序,让用户能够方便地上传文件到服务器,而无需离开当前页面或者打开新的浏览器...

    ExtJS upload file

    "UploadDialog.rar"可能包含一个基于ExtJS的文件上传对话框示例。通常,这种对话框会展示一个文件选择器,用户可以选择多个文件进行上传,并且可能包括上传进度的显示。 3. **ExtJS 进度条**: "ExtJS进度条.txt...

    UploadDialog

    综上所述,"UploadDialog"是一个使用ExtJS创建的无插件多文件上传对话框,它结合了HTML5 File API、ExtJS组件模型和异步传输技术,为用户提供了一种便捷且高度可定制的文件上传解决方案。在实际项目中,开发者可以...

    ExtJs部署及使用方法

    - `b2b/Ext.ux.UploadDialog.js`: 文件上传对话框组件。 ##### 2.1 页面布局实现 在实际应用中,可以通过ExtJs的布局管理器来实现页面的布局设计。下面是一个简单的例子,展示了如何使用ExtJs的BorderLayout布局...

    Ext.ux.UploadDialog

    Ext.ux.UploadDialog是Ext 2.0框架中的一...总的来说,Ext.ux.UploadDialog为ExtJS开发者提供了一种强大且易用的文件上传解决方案,通过它,我们可以轻松地将复杂、高效且用户友好的文件上传功能整合到Web应用程序中。

    精通JS脚本之ExtJS框架.part2.rar

    14.3.2 常用插件UploadDialog 14.3.3 常用插件ManagedIFrame 14.4 使用ExtJS制作Flash统计报表 14.4.1 柱状图 14.4.2 折线图 14.4.3 饼状图 14.4.4 柱状栈图 第15章 调试JavaScript与HTML 15.1 Firebug的...

    ExtJsUploadDialog结合Ftp上传

    在本文中,我们将深入探讨如何使用Ext.ux.UploadDialog组件结合FTP(文件传输协议)来实现异步上传功能,这是在ExtJs框架下进行Web应用开发时一个实用的技术点。Ext.ux.UploadDialog是一个第三方扩展,它为ExtJs提供...

    ext 多文件上传控件 Ext.ux.UploadDialog 使用中的问题

    首先,Ext.ux.UploadDialog是一个基于ExtJS框架的组件,它允许用户在一个对话框中选择并上传多个文件。这个组件通常包含一个文件选择输入框、上传按钮、进度条和取消上传的功能。它的主要优势在于能够提供友好的用户...

    Ext.ux.UploadDialog批量上传文件实例

    Ext.ux.UploadDialog批量上传文件实例是一个基于ExtJS组件库扩展插件的文件上传解决方案,主要针对需要一次性处理多个文件上传的应用场景。ExtJS是一个强大的JavaScript框架,它提供了丰富的用户界面组件,而Ext.ux....

Global site tag (gtag.js) - Google Analytics