实用ExtJS教程100例-009:ExtJS Form无刷新文件上传
文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传。今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传。
首先,我们创建一个Form,它包含一个filefield字段
然后,我们通过Form的submit方法进行提交,此时,ExtJS会自动判断,如果Form中包含filefield字段,Form的method会设置为post
最后,我们通过服务器接收form提交的数据,并返回一段json字符串
ExtJS Form代码如下:
Ext.create("Ext.form.FormPanel", {
title: "ExtJS 无刷新文件上传",
width: 350,
height: 300,
x: 30,
y: 30,
layout: "form",
bodyPadding: "5",
defaultType: "textfield",
fieldDefaults: { labelAlign: "left", labelWidth: 55 },
items: [
{ xtype: "filefield", name: "File", fieldLabel: "选择文件", buttonText: "浏览", allowBlank: false }
],
buttons: [
{
text: "上传",
handler: function () {
var formCmp = this.up("form");
if (!formCmp.isValid()) return; //验证未通过,返回 formCmp.submit({
url: "UploadFileReceiver",
method: "POST",
waitMsg: '正在上传...',
success: function (form, action) {
Ext.MessageBox.alert("提示", action.result.message);
},
failure: function (form, action) {
switch (action.failureType) {
case Ext.form.action.Action.CLIENT_INVALID:
Ext.Msg.alert('失败', 'Form fields may not be submitted with invalid values');
break;
case Ext.form.action.Action.CONNECT_FAILURE:
Ext.Msg.alert('失败', 'Ajax communication failed');
break;
case Ext.form.action.Action.SERVER_INVALID:
Ext.Msg.alert('失败', action.result.message);
}
}
});
}
}
],
renderTo: "container"
});
代码的生成的界面如下
点击浏览按钮,选择文件,然后点击上传按钮即可。
我们服务器段的代码如下:
Response.ContentType = "text/json"; if (Request.Files.Count == 0)
{
var result = new { success = false, message = "请选择文件" };
var strResultContent = Json.Encode(result);
Response.Write(strResultContent);
}
else
{
var file = Request.Files[0];
var result = new { success = true, message = "服务器接收到上传的文件,文件名:" + Path.GetFileName(file.FileName) };
var strResultContent = Json.Encode(result);
Response.Write(strResultContent);
}
首先判断,如果不包含文件,则直接返回json数据。
如果包含文件,我们获取到文件名,并返回成功的json数据。
当我们上传一个文件的时候,会看到如下信息
实用ExtJS教程100例-009:ExtJS Form无刷新文件上传的更多相关文章
- 使用PHP和HTML5 FormData实现无刷新文件上传教程
无刷新文件上传是一个常见而又有点复杂的问题,常见的解决方案是构造 iframe 方式实现. 在 HTML5 中提供了一个 FormData 对象 API,通过 FormData 可以方便地构造一个表单 ...
- 实用ExtJS教程100例-001:开天辟地的Hello World
ExtJS功能繁多,要想彻底的了解确实很困难.作为初学者,如何能找到一条快速的通道呢?我觉得,如果你有Javascript的基础,那就不要惧怕ExtJS的复杂,从动手开始,遇到问题,解决问题,积累经验 ...
- Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传)
form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...
- jquery.form 兼容IE89文件上传
导入部分 <script type="text/javascript" src="js/jquery-1.8.3.min.js" charset=&quo ...
- form表单文件上传 servlet文件接收
需要导入jar包 commons-fileupload-1.3.2.jar commons-io-2.5.jar Upload.Jsp代码 <%@ page language="jav ...
- Django 基于Ajax & form 简单实现文件上传
前端实现 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="U ...
- Spring MVC-表单(Form)标签-文件上传(File Upload)示例(转载实践)
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_upload.htm 说明:示例基于Spring MVC 4.1.6. 以下示例显 ...
- form表单文件上传提交且接口回调显示提交成功
前端: <form method="post" enctype="multipart/form-data" id="formSubmit&quo ...
- SSM+form表单文件上传
这里介绍SSM如何配置上传文件 配置springmvc.xml: <!--配置上传下载--> <bean id="multipartResolver" class ...
随机推荐
- spring-cloud-sleuth+zipkin追踪服务实现(四)
1.前言 在上一篇spring-cloud-sleuth+zipkin追踪服务实现(三)的处理实现后,很多朋友告诉我,在zipkin server的管理页面无法看到项目依赖关系. 当时也没有多想,以为 ...
- CentOS 7 之 Docker 安装及操作命令
Docker 安装 官方网站上有各种环境下的安装指南,比如:CentOS.Ubuntu 和 Debian 系列的安装. 而我们现在主要介绍的是基于 CentOS 7.x 上面的安装. 1.查看是否已经 ...
- 《C陷阱与缺陷》阅读笔记(个人版)
笔记: 第一章:词法陷阱 提倡显示比较if((x = y) != 0) foo(); 第二章:语法陷阱 已知一个类型的声明 该类型的类型转换:吧声明中的变量名和声明末尾的分号去掉,再将剩余的部分用括号 ...
- 002.DNS-BIND简介
一 Linux-BIND服务器简介 Bind是Berkeley Internet Name Domain Service的简写,它是一款实现DNS服务器的开放源码软件.已经成为世界上使用最为广泛的DN ...
- python 函数式编程学习笔记
函数基础 一个函数就是将一些语句集合在一起的部件,它们能够不止一次地在程序中运行.函数的主要作用: 最大化的代码重用和最小化代码冗余 流程的分解 一般地,函数讲的流程是:告诉你怎样去做某事,而不是让你 ...
- linux学习笔记-3.文件相关命令
1.进入到用户根目录 cd ~ 或者 cdcd ~hadoop回到原来路径cd - 2.查看文件详情 stat a.txt 3.移动 mv a.txt /ect/改名mv b.txt a.txt移动并 ...
- IO写 PrintWriter
private static final String FILENAME = "c:\\temp\\out.txt"; PrintWriter pw = null; try { p ...
- Android-认识Service
Android-认识Service 学习自 郭霖的博客 https://developer.android.google.cn/reference/android/app/Service#WhatIs ...
- UVA.11427.Expect the Expected(期望)
题目链接 \(Description\) https://blog.csdn.net/Yukizzz/article/details/52084528 \(Solution\) 首先每一天之间是独立的 ...
- mount: unknown filesystem type 'vboxsf' centos ubuntu 处理方案
Vagrant was unable to mount VirtualBox shared folders. This is usually because the filesystem " ...