日常工作中,一般文件上传都是跟随表单一起提交的,但是遇到form表单中有许多地方有文件上传时这种方式却不是很适用,以下是我工作中用的文件上传方式:

{
xtype: 'fileuploadfield',
fieldLabel: '封面图',
msgTarget: 'side',
anchor: '100%',
margin: '0 0 0 0',
buttonText: '请选择文件...',
listeners: {
'change': function(inputFile){
var fd =new FormData();
fd.append('multipartFiles',inputFile.fileInputEl.dom.files[0]);
Ext.Ajax.request({
url: "url",
cors:true,
useDefaultXhrHeader:false,
method:'post',
rawData:fd,
headers: {
"Content-Type":null /* 最重要的部分,将Content-Type设置成null,ExtJs则会由内部的XMLHTTPRequest自动生成包含boundary的Content-Type,否则在使用rawData的情况下,ExtJs会将Content-Type设置成text/plain */
},
success:function (res,opts) {
alert('success');
var url = res.data.url;​
},
failure:function (res,opts) {
alert('failure');
}
});
}
}
}

自定义ExtJS文件上传的更多相关文章

  1. PHP+ExtJS 文件上传示例

    xtJS 4 有一个非常方便的文件上传组件,可以用来将文件上传到服务器.本文PHP教程UncleToo将介绍使用PHP和ExtJS实现文件上传功能. 首先,创建文件上传组件Ext.form.Panel ...

  2. 自定义input文件上传样式

    前言 文件上传是我们经常会用到的功能,但是原生的input样式太丑了,能不能自定义一个input文件上传样式呢?我这里写了两种方法,form表单提交跟ajax异步提交都没有问题,自动上传或者点击上传按 ...

  3. Extjs文件上传问题总结

    本来文件上传是一个简单而常用的功能,但是,由于刚刚接触extjs,对extjs中的控件及其使用方法并不熟悉,导致本来一个很快就可以搞定的文件上传问题,弄了将近两天的时间.现将问题及解决办法发出来,供有 ...

  4. struts2+extjs文件上传完整实现(攻克了上传中的各种问题)

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/shanhuhau/article/details/28617999 首先须要引入上传控件 <s ...

  5. ExtJs文件上传(Ext.ux.form.FileUploadField)

    Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField, { /**  * @cfg {String} buttonText The b ...

  6. extjs文件上传

    EXT学习教程:http://www.cnblogs.com/iamlilinfeng/category/385121.html Ext文件上传: 例子用到的jar:   1.upload.js /* ...

  7. Extjs 文件上传

    function fromExcel(){ var dxjgdm_sel = Ext.get("dxjgdm").getValue(); var dxjglx_sel = Ext. ...

  8. 自定义WordPress文件上传路径

    自WordPress 3.5版本开始,隐藏了后台媒体设置页面的“默认上传路径和文件的完整URL地址”选项,可以通过下面的代码将该选项调出来. 将下面的代码添加到当前主题functions.php文件中 ...

  9. 自定义input文件上传 file的提示文字及样式

    简单记录一下 效果图: 代码: <input class="aload" type='button' value='上传附件' onClick='javascript:$(& ...

随机推荐

  1. Java面向对象之USB接口实例

    一.需求: 1.在电脑上设置一个USB接口. 2.电脑运行时,将鼠标连接到接口上,鼠标可以使用自己的功能. 3.电脑运行时,将键盘连接到接口上,键盘可以使用自己的功能.(使用接口的作用:减低鼠标.键盘 ...

  2. 利用百度翻译API批量翻译文本

    有时间再做总结! # coding=utf-8 #authority:bing #2017-7-18 import httplib import md5 import urllib import ur ...

  3. Python3之时间模块time & datetime & calendar

    一. 简介 python 提供很多方式处理日期与时间,转换日期格式是一个常见的功能. 时间元组:很多python函数用一个元组装起来的9组数字处理时间. python中时间日期格式化符号: %y 两位 ...

  4. vue可视化图表 基于Echarts封装好的v-charts简介

    **vue可视化图表 基于Echarts封装好的v-charts** 近期公司又一个新的需求,要做一个订单和销售额统计的项目,需要用到可视化图表来更直观的展示数据.首先我想到的是Echarts,众所周 ...

  5. nodejs post 数据到php $_POST["content"]接收不到的问题

    今天写了一段代码,要用到ajax调用php的接口,因为是https的,所以ajax不能跨域,于是使用nodejs调用接口,但是传输数据后 $_POST["content"]接收不到 ...

  6. 3.mouseenter和mouseover事件的区别

    <html> <head> <meta charset="UTF-8"> <script src="jquery-3.3.1.j ...

  7. wpa_supplicant

    一 函数接口介绍 wpa_ctrl_open接口用来打开wpa_supplicant的控制接口,在UNIX系统里使用UNIX domain sockets,而在Windows里则是使用UDP sock ...

  8. Qt 学习之路 2(65):访问网络(1)

    Home / Qt 学习之路 2 / Qt 学习之路 2(65):访问网络(1) Qt 学习之路 2(65):访问网络(1)  豆子  2013年10月11日  Qt 学习之路 2  18条评论 现在 ...

  9. python学习之路---day09

    函数案例: return 可以终止函数后面的调用 def abc() print("1") print("2") print("3") pr ...

  10. CentOS7 配置 nginx php php-fpm

    上一篇说到安装 php 装完并没有任何设置,这篇记录一下设置.先设置 nginx 吧,nginx 网上多如繁星的设置但大都比较简单,属于基础设置,因此此处只贴出设置后的结果,用红色框表示一些自己改动或 ...