`

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

阅读更多

Ext.ux.UploadDialog 像ext一样展现给用户震撼的界面:

如图:上传之前

 

上传过程中:

 

强悍吧。怎样使用呢。?

自己去搜索 Ext.ux.UploadDialog.包下载

使用是出来导入必要的ext包还需要

<link rel="stylesheet"  href="Ext.ux.UploadDialog/UploadDialog/css/Ext.ux.UploadDialog.css" />
    <script type="text/javascript" src="Ext.ux.UploadDialog/Ext.ux.UploadDialog.packed.js"></script>

使用很简单 弄个onclick事件 核心代码如下

function insertImages()
{
    dialog = new Ext.ux.UploadDialog.Dialog({
          title: '文件上传__上传过程中关闭窗口,不影响上传_wayfoon', 
         
url:wayfoon.MMS.DataPage +'/xxx.action?action=xxx', 
       
          width : 450,
          height : 300,
          minWidth : 450,
          minHeight : 300,
          draggable : true,
          resizable : true,
          //autoCreate: true,   
          constraintoviewport: true, 
          permitted_extensions:['JPG','jpg','jpeg','JPEG','GIF','gif','bmp','BMP'],   
          modal: true,
          //post_var_name: 'mms',
          reset_on_hide: false, 
          allow_close_on_upload: true,   //关闭上传窗口是否仍然上传文件
          upload_autostart: false   //是否自动上传文件
    });
        
    dialog.show();//'show-button'
    dialog.on('uploadsuccess', onUploadSuccess);

}
提交时,默认提交的文件名是file 你可以修改 post_var_name: 'myfile',

dialog 有很多事件,如下英文。例子中使用了uploadsuccess事件

filetest - fires before file is added into the queue, parameters:
dialog - reference to dialog
filename - file name
If handler returns false then file will not be queued.
fileadd - fires when file is added into the queue, parameters:
dialog - reference to dialog
filename - file name
fileremove - fires when file is removed from the queue, parameters:
dialog - reference to dialog
filename - file name
record - file record
resetqueue - fires when upload queue is resetted, parameters:
dialog - reference to dialog
beforefileuploadstart - fires when file as about to start uploading:
dialog - reference to dialog
filename - uploaded file name
record - file record
If handler returns false then file upload will be canceled.
fileuploadstart - fires when file has started uploading:
dialog - reference to dialog
filename - uploaded file name
record - file record
uploadsuccess - fires when file is successfuly uploaded, parameters:
dialog - reference to dialog
filename - uploaded file name
data - js-object builded from json-data returned from upload handler response.
record - file record
uploaderror - fires when file upload error occured, parameters:
dialog - reference to dialog
filename - uploaded file name
data - js-object builded from json-data returned from upload handler response.
record - file record
uploadfailed - fires when file upload failed, parameters:
dialog - reference to dialog
filename - failed file name
record - file record
uploadcanceled - fires when file upload canceled, parameters:
dialog - reference to dialog
filename - failed file name
record - file record
uploadstart - fires when upload process starts, parameters:
dialog - reference to dialog
uploadstop - fires when upload process stops, parameters:
dialog - reference to dialog
uploadcomplete - fires when upload process complete (no files to upload left), parameters:
dialog - reference to dialog
注意该多文件上传,每次其实只上传了一个文件,多个文件是分多次上传的。

看到了有很多后台代码采用了多文件 循环读取,只是没有必要的,我们只要当一个文件处理就可以了。


网上很多例子,也只能称为例子,离应用还有点距离,应用的时候,还需要灵活点

比如我们需要传入自己的参数,网上很难找到,其实我们可以在事件中来改变 提交的参数,

采用属性 base_params:{ hehe: "wayfoon" } 来实现,


function onUploadSuccess(dialog, filename, resp_data, record)

 {

你可以改变dialog的某些值

    resp_data 是返回的json数据

}

分享到:
评论

相关推荐

    ext.ux.uploadDialog实例

    Ext.ux.UploadDialog是Ext JS库的一个扩展组件,主要用于实现用户友好的文件上传对话框。这个组件在Web应用中非常实用,特别是在需要处理大量文件上传或者需要用户交互确认的场景下。下面我们将深入探讨`ext.ux....

    Ext.ux.UploadDialog.zip

    Ext.ux.UploadDialog.zip是一个包含Ext上传组件的压缩包,主要服务于Web应用程序中文件上传的需求。这个组件基于Ext JS框架,一个流行的JavaScript UI库,它提供了丰富的用户界面控件和功能。Ext JS允许开发者构建高...

    ext图片批量上传源码

    在EXT应用中使用EXT.ux.UploadDialog时,开发者需要配置插件的相关参数,如URL(服务器端处理文件上传的地址)、文件类型限制、最大上传文件大小等。同时,为了实现良好的用户体验,可能还需要自定义对话框的样式和...

    [Ext 3.x + Ext 2.x] 下拉树 Ext.ux.ComboBoxTree

    【Ext 3.x + Ext 2.x 下拉树 Ext.ux.ComboBoxTree】是基于ExtJS框架的一个组件,它结合了下拉框(ComboBox)和树形控件(TreePanel)的功能,提供了一种用户友好的选择界面。在网页应用中,这种控件常用于展示层级...

    ext.ux.menu.storemenu.zip

    在压缩包中,我们有两个文件:`ext.ux.menu.storemenu.js` 和 `license.txt`。前者很可能是实际的 JavaScript 代码文件,实现了 StoreMenu 功能,而后者则包含了该组件的许可协议信息。 `ext.ux.menu.storemenu.js`...

    Ext.ux.form.ColorPickerFieldPlus 老外重写调色版

    `Ext.ux.form.ColorPickerFieldPlus` 是一个由老外开发者重写的色彩选择器组件,它扩展了原生的Ext JS库中的`ColorPickerField`控件,为用户提供更加丰富的色彩选取体验。这个组件的目的是为了实现更自由、更接近...

    Ext.ux.tree.treegrid异步加载

    在ExtJS框架中,`Ext.ux.tree.TreeGrid`组件是一种结合了树形结构与表格显示特性的控件,适用于展示具有层级关系的数据。通过这种组件,用户可以在一个界面上同时查看数据的层次结构以及具体数据内容。 #### 二、...

    ExtJs选中var editor = new Ext.ux.grid.RowEditor详解

    ### ExtJs选中 `var editor = new Ext.ux.grid.RowEditor` 详解 在Web开发领域,特别是使用ExtJs框架进行复杂用户界面构建时,`RowEditor` 是一个非常实用的功能,它允许用户直接在表格行内编辑数据,极大地提高了...

    基于extjs的.NET3.5控件Coolite 1.0.0.34580(Preview预览版)

    基于extjs的.NET3.5控件Coolite 1.0.0.34580 (Preview预览版), *************************************************** * Version 1.0.0 升级日志 * *************************************************** 1. ...

    Ext.ux.form.TinyMCETextArea

    Ext.ux.form.TinyMCETextArea 是一个在Extjs4框架下实现的组件,它将TinyMCE编辑器集成到了ExtJS的表单控件中,提供了富文本编辑的功能。这个组件是基于HTML5构建的,因此在兼容性和功能上能够满足现代网页应用的...

    Ext.ux.form.field.DateTime:ExtJS DateTime字段

    Ext.ux.DateTimeField控件已在Sencha论坛上浮动。 有一些补丁程序使其可用于5.1。 参见此处: : 什么有效 我得到了最新版本,将类重命名为更类似于当前的Ext 5.1架构,并修复了尝试选择时间控件时的错误。 过时的...

    Ext 文件上传demo

    在文件上传场景中,EXT可能使用了`Ext.form.FileField`或`Ext.ux.FileUploadField`组件,这些组件提供了文件选择和上传功能。 2. **文件选择控件**:在EXT中,文件选择通常通过一个隐藏的...

    Ext下拉树、下拉表格

    在Ext中,下拉树是将传统的下拉列表与树形控件相结合的一种方式,用户可以点击输入框打开一个包含树结构的下拉菜单。这种组件常用于需要层次结构选择的场景,例如组织架构、文件目录等。创建下拉树通常涉及以下步骤...

    EXT控件lovcombo

    EXT控件是Sencha EXT JS框架中的一种组件,它提供了丰富的用户界面元素,用于构建复杂的Web应用程序。在EXT控件中,"lovcombo"(即Love Combo)是一种特殊的ComboBox,通常用于显示一个列表,其中每个项可以被选择,...

    Ext4.2年月日时分秒控件

    在实际项目中,这种时间选择控件的实现可能会涉及到CSS样式调整、JavaScript逻辑编写、与服务器端数据交互等多个方面。对于压缩包中的"Ext4.2时间控件",我们可以假设它包含了完整的源代码、示例、文档,甚至可能有...

    Ext.ux.MonthPicker.js

    EXT MonthPicker 月份选择控件,在页面插入js, 在需要的面板或者form面板插入即可 var item ={ xtype: 'monthfield', width: 150, fieldLabel: '月份', labelAlign: 'right', labelSeparator: ' ', ...

    ExtJs图片按钮控件

    1. 引入`Ext.ux.ImageButton.js`:确保在你的HTML文件或应用配置中引入了这个文件,以便能够使用图片按钮控件。 2. 定义配置对象:创建一个包含所需属性和配置的JavaScript对象,例如`text`(按钮上的文字)、`img`...

    Ext2.x扩展控件(里面共有67个扩展控件)

    这个压缩包是本人从Ext官方论坛收集的用户扩展控件,针对EXT版本2.x,里面有树表格,图表控件,上传控件,表格过滤控件,通知窗口控件等等。 大部分解压后放入ext的example文件夹下就可以运行,有少数几个需要部署到...

    ext时间控件(精确到分/秒)IP控件(修正)

    2.代码中引用控件代码如下: { xtype: 'uxipfield', id:'sbt', fieldLabel: 'sbt', width:200 },{ xtype: 'combotimefield', id:'nmd', name:'test.nmd', fieldLabel: 'nmd', width:200 },{ xtype: '...

Global site tag (gtag.js) - Google Analytics