3.11 Ext JS文件上传基本使用

约定不等于承诺〃 2024-03-16 11:44 13阅读 0赞

文件上传对应的组件是Ext.form.field.File。 组件的效果是输入框+文件选择按钮，如下图所示：

![在这里插入图片描述][6e0a79c1e9564aa596e147c32b3162d3.png]

点击“选择文件的按钮”， 会弹出操作系统选择文件的对话框，如下图所示窗口：  
![在这里插入图片描述][20c2a26481c446bb86b491b2ea94d9a6.png]

选择文件后，输入框会根据不同的浏览器有不同的显示， 有的浏览器是文件名，有的浏览器是完整路径，而有的浏览器是带有fakepath 的假路径。  
Ext JS实现文件选择字段的内部机制是使用隐藏的文件输入元素实现文件上传功能，在表单提交的时候进行文件上传， 这里使用的不是标准的Ajax方式，但是可以扩展文件上传组件， 使用Ajax异步上传，这个会在本系列的后面章节继续介绍。

### 单文件上传字段的演示代码 ###

上面文件上传字段的完整演示代码如下：

{
            xtype: 'form',
            title: '上传文件',
            width: 400,
            bodyPadding: 10,
            items: [{
                xtype: 'filefield',
                name: 'myfile',
                fieldLabel: '文件',
                labelWidth: 50,
                msgTarget: 'sid

[6e0a79c1e9564aa596e147c32b3162d3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/6705b86ad7f344f69d71dc5ea7677136.png
[20c2a26481c446bb86b491b2ea94d9a6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/2b095d51b9dd4be5b1a272e8364fbc56.png

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关 Ext JS + Spring Boot 整合实现文件上传实例

本篇环境及版本 Spring Boot 2.5.0 Ext JS 7.0.0 前端代码在Form 里面放置fileuploadfield 类型的字段

超、凢脫俗/ 2024年03月16日 22:25/ 0 赞/ 46 阅读

相关 3.11 Ext JS文件上传基本使用

文件上传对应的组件是Ext.form.field.File。组件的效果是输入框+文件选择按钮，如下图所示： ![在这里插入图片描述][6e0a79c1e9564aa596e

约定不等于承诺〃/ 2024年03月16日 11:44/ 0 赞/ 14 阅读

相关 [js]文件上传

![这里写图片描述][SouthEast] ![这里写图片描述][SouthEast 1] javascript部分：上传到github上。 [文件上传部分代码][Li

￡神魔★判官ぃ/ 2022年06月03日 04:21/ 0 赞/ 254 阅读

相关使用resumable.js进行文件上传

示例（由于屏幕分辨率的问题，我的截图到了54%的时候我其实是点击了一下暂停，然后再继续的） ![这里写图片描述][70] 可以暂停，可以继续，可以把后端服务停了，然后继续

浅浅的花香味﹌/ 2022年05月22日 12:45/ 0 赞/ 506 阅读

相关 Node.js-文件上传

6. 文件上传 File.js: npm install uuid;npm install formidable; const http = require('ht

柔情只为你懂/ 2022年04月02日 12:22/ 0 赞/ 273 阅读

相关 js 实现上传文件

参考一： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <me

今天药忘吃喽~/ 2022年02月02日 01:43/ 0 赞/ 293 阅读

相关 js上传文件；input上传文件；

html原生上传文件方式1： ![在这里插入图片描述][20210324233047985.gif] <!DOCTYPE html> <html>

小灰灰/ 2021年09月07日 06:20/ 0 赞/ 692 阅读

相关 js input文件上传

(1)设置类型type='file' 属性: accept='格式1,格式2' 前台筛选文件格式允许所有图片格式:"image/

柔光的暖阳◎/ 2021年07月25日 00:15/ 0 赞/ 655 阅读

相关文件上传组件WebUploader基本使用

文件上传组件WebUploader基本使用一、缘起公司网站社区有图片上传功能，由于网站已经有些年头了，当时上传的时候根据客户端支不支持flash而分为两种逻辑。如果支...

红太狼/ 2020年06月06日 17:57/ 0 赞/ 948 阅读

相关文件上传组件WebUploader基本使用

其实第三方的js插件一般用法都差不多，基本都是导入资源文件、根据配置初始化插件对象、使用对象的方法或者监听事件完成特定的功能，webuploader也差不多。

朱雀/ 2020年05月10日 16:36/ 0 赞/ 1057 阅读