Extjs项目使用技巧————文件上传
2024-05-12 00:14:03
在组件中的上传，上传注意一下内容：
1、 在上传时需要使用form.submit来上传文件；注意form对象时单独的，不能和其他表单一同使用；文件上传的发送post请求在debug中无法看到，只能在网络中查看到
在js文件中的上传步骤：
1、获得form对象，利用该对象来上传文件；
2、获得上传的form表单；利用该表单来获取文件名称
3、获得文件名；
xtype : "form",
idFlag:'fileForm',
layout : "form",
labelWidth : 60,
fileUpload : true,
style : 'margin:0px 0px 0px 20px',
items : [{
anchor : "95%",
name : "upload",
buttonText : '',
appendixId : '',// 对于谷歌上传增加的Id by liyanshuai 2011-08-10
emptyText: '请选择图片',
fieldLabel : '上传图片',
buttonCfg: {iconCls: 'upload'},
xtype : 'fileuploadfield',
appendixUrl : "/customer/agreement/agree-sub!saveAppendix.action",
idFlag : "uploadjpg",
listeners: {
fileselected : function() {
//获得上传的文件名
var val = this.fileInput.dom.value;
//获取表单对象
var appendix = tempthis.find( "idFlag" , "uploadjpg" ) [0];
//获取后缀名称
var isImage = val.substring(val.lastIndexOf("."));
//判断是否为图片
if(isImage.toLowerCase() ==".jpg" || isImage.toLowerCase()==".gif" || isImage.toLowerCase()==".bmp" || isImage.toLowerCase()==".png"){
appendix.clearInvalid();
//调用文件上传
tempthis.saveAppendix();
}else{
appendix.markInvalid('请选择正确的图片格式！')
Ext.ux.LevitationMsgBox.msg('提示','请选择正确的图片格式！');
}
}
}
}]
saveAppendix()方法使用
文件上传时发送的参数：
saveAppendix : function() {
var tempthis = this;
// 文件上次的form对象
var thisForm = tempthis.find('idFlag','fileForm')[0];
var appendix = tempthis.find( "idFlag" , "uploadjpg" ) [0];
//谷歌浏览器情况下需要加下appendixId的参数这样后台才能保存附件 by liyanshuai 2011-08-10
var uploadName = appendix.getValue();
var index = uploadName.lastIndexOf("\\");
var params = {},
//获得文件名称
uploadName = uploadName.substring(index+1,uploadName.length);
//appendixObj用来向后台发送数据的对象，存放着文件名等信息
if(!tempthis.appendixObj) {//不为空表示第一次上传
var fileName = tempthis.find("idFlag","uploadjpg")[0].getValue();
var uploadName = fileName;
if(fileName.indexOf("\\")>0) {
var index = fileName.lastIndexOf("\\");
uploadName = fileName.substring(index+1,fileName.length);
}
//将文件等信息转换为json数据，发送到后台，用于转化为Appendix对象
tempthis.appendixObj = "{'appendixName':'"+tempthis.find("idFlag","uploadjpg")[0].getValue()+
"','appendixTypeName':'"+tempthis.find("idFlag","uploadjpg")[0].getValue().substring(tempthis.find("idFlag","uploadjpg")[0].getValue().lastIndexOf(".")+1)+
"','appendixTypeCode':'"+tempthis.find("idFlag","uploadjpg")[0].getValue().substring(tempthis.find("idFlag","uploadjpg")[0].getValue().lastIndexOf(".")+1)+"'}";
}
var fileName = tempthis.find("idFlag","uploadjpg")[0].getValue();
var uploadName = fileName;
if(fileName.indexOf("\\")>0) {
var index = fileName.lastIndexOf("\\");
uploadName = fileName.substring(index+1,fileName.length);
}
//上传文件的文件名
tempthis.thisAppendixName = uploadName;
if(uploadName){
Ext.apply(params,{
//增加的参数 appendixId by liyanshuai 2011-08-10
appendixId : appendix.appendixId,
uploadFileName : uploadName,
uploadContentType : uploadName.substring(uploadName.lastIndexOf(".")+1,uploadName.length),
appendixObj : tempthis.appendixObj
});
}
Ext.MessageBox.show( {
title : "提示",
msg : "正在保存,请稍后...",
progress : true,
width : 300,
wait : true,
closable : false
} );
//进行保存上传文件
thisForm.getForm().submit( {
url : "/customer/agreement/agree-sub!deleteAndSaveAppendix.action",
params : params,
success : function (form,action){
var resultTrue = Ext.util.JSON.decode(action.response.responseText);
tempthis.appendixObj = Ext.encode(resultTrue);
tempthis.isDelApp = true;
Ext.MessageBox.hide();
Ext.ux.LevitationMsgBox.msg( "提示" , "保存成功！" );
},
failure : function ( response , opts ){
Ext.MessageBox.hide();
Ext.ux.LevitationMsgBox.msg( "提示" , "数据提交错误！" );
}
} )
},
//当点击取消或者重置的时候删除以前上传附件
immediatelyDeleteApp : function(tempthis) {
if(!tempthis.isDelApp) {
//标识位update是修改时的hide不做删除操作
Ext.Ajax.request({
url: '/customer/agreement/agree-sub!immediatelyDeleteAppdendix.action',
params : {
thisAppendixName:tempthis.thisAppendixName,
appendixObj : tempthis.appendixObj
},
success: function(response, opts) {
tempthis.appendixObj = "";
},
failure: function(response, opts) {
}
});
}
}
后台代码：
/**
* 对于谷歌情况下上传附件的方法
* @Date Aug 10, 2011
* @author zhangwb
* @throws IOException
*
*/
public void deleteAndSaveAppendix() throws Exception{
//文件上传是注意上传需要进行语言进行更改
ServletActionContext.getResponse().setContentType(
"text/html;charset=utf-8;");
//upload是文件需要判断文件的大小
if (upload != null && upload.length() > MAXUPLOADFILESIZE) {
String errorMsg = "上传的文件过大，允许上传的图片最大为：10M！";
Struts2Utils.getResponse().getWriter().write(
"{'success':false, 'errorMsg':'" + errorMsg + "'}");
return;
}
//存储着文件的相关信息如文件名称，格式等信息,将js文件中上传的文件信息转化为对象
Appendix appendix = null;
if (appendixObj != null && !"".equals(appendixObj)) {
appendix = JsonUtils.json2Bean(this.appendixObj, new Appendix());
}
//获得要上传的文件路径
String path = ServletActionContext.getServletContext().getRealPath(
File.separator+"upload"+File.separator+"agreement");
// 获得一个附件对象返回给前台
Appendix returnappendix = this.appendixManager.deleteAndSaveAppendix(
this.upload, appendix, path, this.isDeleteApp,
this.uploadFileName);
JsonConfig jsonConfig = new JsonConfig();
jsonConfig.setExcludes(new String[] { "hibernateLazyInitializer",
"handler" });
jsonConfig.registerJsonValueProcessor(java.sql.Timestamp.class,
new DateJsonValueProcessor("yyyy-MM-dd HH:mm:ss"));
StringBuffer sb = new StringBuffer();
StringBuffer strSb = new StringBuffer(JSONSerializer.toJSON(
returnappendix, jsonConfig).toString());
strSb.deleteCharAt(0);
sb.append("{'success':true,");
sb.append(strSb.toString());
Struts2Utils.getResponse().getWriter().write(sb.toString());
}
deleteAndSaveAppendix是组件里面的方法直接调用
实体类如何配置
// 上传附件表集合
private Set<Appendix> appendix = new HashSet<Appendix>();
/**
* @return the appendix 建立产品表与附件表多对多关联
*/
@ManyToMany
@JoinTable(name = "OBJECT_APPENDIX_RELATION", joinColumns = { @JoinColumn(name = "OBJECT_ID") }, inverseJoinColumns = { @JoinColumn(name = "APPENDIX_ID") })
@Fetch(FetchMode.SUBSELECT)
public Set<Appendix> getAppendix() {
return appendix;
}
public void setAppendix(Set<Appendix> appendix) {
this.appendix = appendix;
}
来自为知笔记(Wiz)
转载于:https://www.cnblogs.com/babyhhcsy/p/3431113.html
Extjs项目使用技巧————文件上传相关推荐
- 实用ExtJS教程100例-009：ExtJS Form无刷新文件上传
文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...
- JavaWeb-10 (项目案例7 文件上传与富文本编辑器)
一.Web文件上传与下载 ① 概述 将本地文件上传到服务器端,从服务器端下载文件到本地的过程.例如目前网站需要上传头像.上传下载图片或网盘等功能都是利用文件上传下载功能实现的. ② 原理 (1) 文件 ...
- Gitlab--替换gitlab项目目录，重新上传文件
第一次使用Gitlab管理项目,首次文件上传备份时一顿瞎操作.以至于项目目录混乱不堪,今天想重新更新目录,又处处踩坑,在此记录下正确步骤,希望可以帮助到大家. 若远程连接后直接进行add.commit ...
- 初步理解MultipartFile[文件上传]
浅识MultipartFile 一.概述 二.对MultipartFile初步理解 1.MultipartFile类的注释说明 2.MultipartFile常用方法解析 三.MultipartFil ...
- SpringBoot下文件上传与下载的实现
原文:http://blog.csdn.net/colton_null/article/details/76696674 SpringBoot后台如何实现文件上传下载? 最近做的一个项目涉及到文件上传 ...
- .NET和.NET Core Web APi FormData多文件上传
[导读]最近因维护.NET和.NET Core项目用到文件上传功能,虽说也做过,但是没做过什么对比,借此将二者利用Ajax通过FormData上传文件做一个总结,通过视图提交表单太简单,这里不做阐述, ...
- .Net Core 图片文件上传下载
当下.Net Core项目可是如雨后春笋一般发展起来,作为.Net大军中的一员,我热忱地拥抱了.Net Core并且积极使用其进行业务的开发,我们先介绍下.Net Core项目下实现文件上传下载接口. ...
- 文件上传简介1---上传到指定的目录
preparation 本节摘要:本节主要介绍上传文件到指定目录. 引入: 文件上传是开发中常用的功能,本节主要介绍用commons-fileupload-1.1.jar包实现基本的文件上传功能,即上 ...
- java文件上传maven_ssm+maven框架搭建实现ajax多文件上传功能
项目描述 用myeclipse工具搭建的ssm+maven项目, 之前文件上传是用form表单实现的,可是form表单上传文件会刷新页面,所以就得用ajax无刷新实现文件上传. 运行环境 jdk7+t ...
- java 文件上传 大小_java 上传文件大小转换为 GB/MB/KB/B
1.工具类 package cn.cmodes.common.utils; import java.io.File; import java.io.FileInputStream; import ja ...
最新文章
- 为什么博士要挤破头进高校？同一个实验室，硕士们进了大厂拿高薪
- 【iOS10 SpeechRecognition】语音识别 现说现译的最佳实践
- MySQL 体系结构详细介绍
- python PyQt5中文教程☞【第二节】PyQt5基本功能（创建窗口、应用程序图标、显示提示语、通过按钮关闭窗口、消息框（关闭窗口确认框）、窗口显示在屏幕中间【居中显示】）
- 实验一（高见老师收）
- 谷歌浏览器下载的文件保存在哪里？
- MSP430杂谈--IIC通信
- cad图纸批量转换pdf
- WPS 表格中单元格文字后插入公式
- win10专业版激活（cmd方式）
- 怎样检测php语法错误,检查php的语法错误
- 显示器知识：分辨率1080P、2K、4K、8K相关知识介绍，看完你就懂了！
- ddd linux 调试工具_linux-c/c++调试利器gdb、ddd小试
- word 如何删除边框黑线
- 【好数推荐】数据堂平均音色语音库
- 明年春天见！罗永浩发声：还完债当天就重返科技行业
- java开发之异常处理_SimpleMappingExceptionResolver
- 第16集丨阳明心学量子力学
- 分享134个ASP源码，总有一款适合您
- 企业微信+esaywechat 扫码授权登录