Java多张图片上传和回显问题

背景：管理系统需求，完成入职员工信息录入，审批功能。教育信息，资质信息，家庭信息的项数均可增减。由于牵扯到的图片比较多，实现可反复保存修改，图片处理很重要。

问题描述：

1.当在页面选中并上传了图片，然后加载在<img />标签内成功回显。由于我们在方案上是每次删除旧的路径，增加新的路径。这就导致，如果每次保存前不再次选中图片，就会导致图片丢失。

解决：每次把路径也带回到前台页面，给临时变量temp_pic，因为直接把路径赋值$("#pic").val(...)是不可行的,<input type="file" id="pic" name="pic">。所以，在上传文件的servlet中，判断filename是否存在，存在则使用新路径，不存在使用旧路径。

2.如果上传图片为10个，只上传最后2个图片，会发现图片上传不成功。可能问题就是，前面保存文件时，filename不存在导致的异常，使得上传失败。

解决：if(StringUtils.isNotBlank(filename)) {
item.write( new File(path,filename));//第三方提供的

}

因为servlet中每判断到一个图片，就上传一次，前面的图片根本没选中，filename值为空，导致异常，后面就不走了。所以，需要对filename值是否为空进行判断一下。

前台页面，资料很多（略过）：

1 特别要注意form表单，要多部分表单提交，enctype="multipart/form-data"

2 name字段要全部放在<fieldset></fieldset>标签内。

<form role="form" class="form-horizontal" id="education_form"
      enctype="multipart/form-data" method="post">
    <fieldset >
        <img id="pic_degree_path" name="pic"  src=""  alt="点击上传" >
        <input type="file" id="pic_degree" name="pic_degree" accept=".BMP,.JPG,.JPEG,.PNG">
    </fieldset>
</form>

后台关于servlet，流程如下 (非详细版)：

注意:

1 item.getFieldName(); 获取name值；

2 item.getString("utf-8");获取普通字段的value值； “utf-8”是重载时的编码方式

3 item.getName(); 获取上传文件的文件名。如果是中文，注意转换编码方式。

public class MrFileEmpUploadServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        Logger log = YGLogger.getLogger("WEB_FILUPLOAD.trc");
        log.infoFmt("-----------------dod------------------分隔");
        DiskFileItemFactory factory = new DiskFileItemFactory();  

        log.infoFmt("上传路径：path:[{}],rootPath:[{}]", path, rootPath);

        factory.setRepository(new File(path));
        //设置 缓存的大小，当上传文件的容量超过该缓存时，直接放到 暂时存储室
        factory.setSizeThreshold(1024*1024);
        //初始化ServletFileUpload，可以说是一个封装好的的容器
        ServletFileUpload upload = new ServletFileUpload(factory);

        try {
            //可以上传多个文件
            List<FileItem> list = upload.parseRequest(req);

            //循环遍历这些从页面获取的name字段集合
            for(FileItem item : list) {
                //获取表单的属性名字
                String name = item.getFieldName();
                //如果获取的 表单信息是普通的 文本 信息
                String value = "";
                //判断是否是表单字段
                if(item.isFormField()) {
                    //获取普通表单name字段的value值。
                    value=item.getString("utf-8");
                    //把从页面获取的值放入request域中，以便带入接下来的请求中。
                    req.setAttribute(name,value);

                }else {    //不是普通表单字段，而是文件上传对应的输入框的name字段值
                    
                    //获取上传文件名
                    value = item.getName(); 
                    log.infoFmt("=========333===========》name=[{}],value=[{}]",name,value);
                    filename = value;
                    req.setAttribute(filename, filename);
                    File pkg = new File(path);
                    if (!pkg.exists()) {
                        pkg.mkdirs();
                    }

                    //重点：如果上传的文件名不存在，则不仅行插入
                    if(StringUtils.isNotBlank(filename)) {
                        item.write( new File(path,filename));//第三方提供的
                   }

                }

            }


        } catch (FileUploadException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        catch (Exception e) {
            // TODO Auto-generated catch block
            //e.printStackTrace();
        }


        txnCod=txnCod+".do";
        log.infoFmt("交易码【[{}]】",txnCod);
        req.getRequestDispatcher(txnCod).forward(req, resp);
    }
}

Java多张图片上传和回显问题

猜你喜欢