ExtJs上传文件

蹉跎莫遣韶光老，人生唯有读书好。这篇文章主要讲述ExtJs上传文件相关的知识，希望能为你提供帮助。

最近项目用到了ExtJs6.0.2版本，比现在主流的ExtJS框架都要前沿。
我之前用的是EasyUI上传的工作流部署的压缩文件，现在想用ExtJs来做。
废话不多说，上明码。
关于Ext.form.Panel相关的属性，我就不多说什么了，自己查询API文档即可。
重点在于按钮，bottons中，点击按钮触发的事件，那里定义了form的属性。
method="post",enctype="multipart/form-data"。
当然了，上传文件的那个input标签的 name属性，值要与Controller中的接收参数一致，
name=deployFile
这里最大的教训就是，当时考虑到了enctype属性，但是把它的属性误理解为了Ext.form.Panel的属性了，后来才反应过来，enctype这个属性，它应该是form表单的属性，所以在form提交的JS里面添加上去，NullPointerException解决。
前端JS代码如下

/********************上传工作流Zip******************************/
Ext.create(Ext.form.Panel,
title: 部署工作流Zip压缩包,
width: 400,
bodyPadding: 10,
frame: true,
renderTo: Ext.getBody(),
items: [
xtype: filefield,
name: deployFile,
fieldLabel: 压缩文件,
labelWidth: 60,
msgTarget: side,
fileUpload: true,
allowBlank: false,
anchor: 100%,
buttonText: 请选择压缩包位置
],

buttons: [
text: 上传部署,
buttonAlign: center,
handler: function ()
var form = this.up(form).getForm();
if (form.isValid())
form.submit(
method: post,
enctype: "multipart/form-data",
url: < c:url value="https://www.songbingjia.com/actions/deploy/add"/> ,
waitMsg: 正在上传中...,
success: function (fp, o)
Ext.Msg.alert(Success, 部署成功);
,
failure: function (form, action)
Ext.Msg.alert(部署失败, action.result.reason);

);

]
);

效果如下：

后台Controller接收代码：

@RequestMapping(value = https://www.songbingjia.com/android/URL_DEPLOY_ADD, method = POST)
@ResponseBody
public JsonResponseVO accountLogin(MultipartFile deployFile)
//获取部署文件的名字
String fileName = deployFile.getOriginalFilename();
//把文件的后缀去掉
fileName = fileName.substring(0, fileName.lastIndexOf("."));
Deployment deployment;

//获取部署接口实现
try
deployment = repositoryService.createDeployment()//创建部署
.name(fileName)//需要部署的流程名称，将会记录在流程部署表的 NAME_ 字段上
.addZipInputStream(new ZipInputStream(deployFile.getInputStream()))//添加Zip输入流
.deploy();
catch (IOException e)
e.printStackTrace();
return new JsonResponseVO(false, "部署失败");

LOGGER.info("部署id=", deployment.getId()); //获取部署id
LOGGER.info("部署名称=", deployment.getName()); //获取部署名称
return new JsonResponseVO();

分割线--------------------------------------------------------------------------------------
EasyUI的form表单，它的代码就比较简单了，后台一样，前台代码如下：

< !--上传对话框html-->
< div id="dialog">
< !--上传要使用method="post" enctype="multipart/form-data"-->
< form id="upload" method="post" enctype="multipart/form-data">
< input type="file" name="deployFile" class="easyui-validatebox" data-options="required:true">
< /form>
< /div>

如果本文对你有帮助，不妨请我喝瓶可乐吧！
【ExtJs上传文件】