• 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);

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

    现在还在头疼中

  • 相关阅读:
    crontab修改默认编辑器
    phpstorm license 解决
    获从2017-2 到现在所有月份;
    获取所在月第一天和最后一天
    EF相关报错
    EF延迟加载LazyLoading
    EF性能优化
    Redis
    搜索服务器Elasticsearch
    Nosql
  • 原文地址:https://www.cnblogs.com/duzjextjs/p/5334206.html
Copyright © 2020-2023  润新知