extjs多文件上传的问题

最近公司让改需求,一个字段要保存三张图片 ,前端用extjs写,后台用spring接,个人的想法是把传进来的三张图片用拼串的格式放进去,可是取的时候就不行了,老是报越界

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
MultipartFile file = multipartRequest.getFile("imgFile");

String filename = file.getOriginalFilename();

String newFileRetName = "";

String path = StringConstants.UPLOAD_RIGHTDRUG_PATH+newId+"/";

if (file != null)
{
if (StringUtils.hasText(filename))
{
try
{
File f = new File(fileUtil.getRealPath(path));
if (!f.exists())
f.mkdirs();
filename = filename.substring(filename.lastIndexOf("\\") + 1);
String subfix = filename.substring(filename.lastIndexOf("."));
String newFileName = CommonHelper.getGUID() + subfix;

InputStream in = file.getInputStream();
FileOutputStream out = new FileOutputStream(fileUtil.getRealPath(CommonHelper.joinString(
path, "/", newFileName)));
byte buffer[] = new byte[1024];
int len = 0;
while ((len = in.read(buffer)) > 0)
{
out.write(buffer, 0, len);
}
in.close();
out.close();
newFileRetName = CommonHelper.joinString(path, newFileName);

if(StringUtils.hasText(treatmentrecord.getMedicalrecord())){
File oldFile = new File(fileUtil.getRealPath(treatmentrecord.getMedicalrecord()));
oldFile.delete();
}
}
catch (Exception ex)
{
throw ex;
}
}
}

treatmentrecord.setMedicalrecord(newFileRetName)

上面是后台存文件代码

下面是extjs的代码

{
id : ‘imgFile‘,
name : ‘imgFile‘,
inputType : "file",
fieldLabel : ‘病历1‘,
xtype : ‘textfield‘,
// hidden: 101,
// hideLabel :101,
anchor : ‘100%‘
},
{
xtype : ‘box‘,
id : ‘browseImage‘,
fieldLabel : "图片预览",
// hidden: 101,
// hideLabel :101,
autoEl : {
width : 150,
height : 100,
tag : ‘img‘,
// type : ‘image‘,
src :‘<%="".equals(CommonHelper.getNULLString(treatmentrecord.getMedicalrecord()))?"Ext.BLANK_IMAGE_URL":request.getContextPath()+"/"+medicalrecord%>‘ ,
style : ‘filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);‘,
complete : ‘on‘,
id : ‘imageBrowse‘
}
},

以及图片预览代码

listeners : {
‘render‘ : function(f) {
this.form.findField(‘imgFile‘).on(‘render‘, function() {
//通過change事件,图片也动态跟踪选择的图片变化
Ext.get(‘imgFile‘).on(‘change‘, function(field, newValue, oldValue) {
//得到选择的图片路径
var url = Ext.get(‘imgFile‘).dom.value;
// var url = ‘file://‘ + Ext.get(‘imgFile‘).dom.value;
//是否是规定的图片类型
if (img_reg.test(url)) {
if (Ext.isIE) {
var image = Ext.get(‘imageBrowse‘).dom;
image.src = Ext.BLANK_IMAGE_URL;// 覆盖原来的图片
image.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;
}// 支持FF
else {
var files = document.getElementById("imgFile");
var file = files.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
var pic = document.getElementById("imageBrowse");
pic.src=this.result;
}
}
}else{
Ext.get(‘imgFile‘).dom.files.item(0).setAsDataURL("");
}
}, this);
}, this);

单张图片的添删改查都可以实现,一到多张就报问题!!

现在还在头疼中

时间: 2024-07-30 13:52:57

extjs多文件上传的问题的相关文章

【ExtJs】ExtJs的文件上传

ExtJs的文件上传也是采用Ajax的方式,基本上,用户上传之后,其结果马上推回给前台.下面以一个ExtJs图片上传系统,说明这个问题. 一.基本目标 实现如下的一个图片上传的系统,不是基本图片格式,大于1M的图片不给予上传,上传成功显示图片,上传不成功,则显示错误信息. 二.基本思想 这个工程的目录结构如下, 如FileUpload.html的HTML布局所示,js与ext-theme-classic下面皆是Ext的基本资源.然后Upload文件夹用来存放上传的图片,FileUpload.ht

ExtJS 中文件上传控件

1 Ext.onReady(function(){ 2 var fileUpload = new Ext.FormPanel({ 3 id:'fileUpload', 4 frame:true, 5 fileUpload:true, 6 items:[{ 7 xtype:'textfield', 8 labelStyle : 'text-align:right;', 9 allowBlank:false, 10 fieldLabel:'选择文件', 11 inputType:'file', 12

ExtJS:文件上传实例

var ext_dateFormat = 'Y-m-d H:i:s'; var dateFormat = 'yyyy-MM-dd HH:mm:ss'; var date = new Date(); Ext.onReady(function() { var fifp =Ext.create('Ext.form.Panel', { renderTo: 'fi-form', width: 500, frame: true, title: '文件上传', bodyPadding: '10 10 0',

PHP+ExtJS 文件上传示例

xtJS 4 有一个非常方便的文件上传组件,可以用来将文件上传到服务器.本文PHP教程UncleToo将介绍使用PHP和ExtJS实现文件上传功能. 首先,创建文件上传组件Ext.form.Panel,并添加一个上传按钮及按钮单击事件,该事件将验证并提交表单到upload.php的文件.看下面代码: ExtJS部分 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 3

[转]ExtJs入门之filefield:文件上传的配置+结合Ajax完美实现文件上传的asp.net示例

原文地址:http://www.stepday.com/topic/?459 作文一个ExtJs的入门汉子,学习起来的确是比较费劲的事情,不过如今在这样一个网络资源如此丰富的时代,依然不是那么难了的.基本上都是Copy过来加以部分改造即可实现自己想要的功能,加之如今的第三方开发者也大发慈悲地写出了API的帮助文档以及示例文档.关于ExtJs内的文件上传,将从以下几个方面进行展开讲解: 一.ExtJs文件上传版面的布局以及配置 因为ExtJs的文件上传组件filefield是基于form表单提交数

Extjs中用dwr实现文件上传时,fileuploadfield不能正常显示的问题

当使用DWR调用Extjs的fileuploadfield 来做文件上传时,不能实现上传操作,需要修改dwr对应jar包中的engine.js文件 将1808行 var clone =value.cloneNode(true); 1812行  value.parentNode.insertBefore(clone,value); 注释掉 通过  var file = dwr.util.getValue("uploadFile");  获取fileuploadfield 对应的值 版权声

Extjs文件上传问题总结

本来文件上传是一个简单而常用的功能,但是,由于刚刚接触extjs,对extjs中的控件及其使用方法并不熟悉,导致本来一个很快就可以搞定的文件上传问题,弄了将近两天的时间.现将问题及解决办法发出来,供有相同烦恼的博园参考.只是我第一次发文,如有不妥,望各位海涵. 问题描述:在文件上传的时候,在ie浏览器下,文件上传成功以后返回response时,回调函数直接报错:无法调用null或者空值的success属性. 首先看下extjs的代码: <html xmlns="http://www.w3.

EXTJS+ASP.NET上传文件带实时进度条代码

一,文件夹 二,upLoad.cs是继承IHttpModule的类: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Text; using System.IO; using System.Reflection; using System.Globalization; using System.Web.Hosting; /// <summary>

struts2+extjs文件上传完整实现(解决了上传中的各种问题)

首先需要引入上传控件 <script type="text/javascript" src="<%=basePath%>/js/ext/examples/ux/fileuploadfield/FileUploadField.js" charset="utf-8"></script> 弹出上传框对应extjs代码 var uploadForm=new Ext.FormPanel({ id:'uploadForm'