图片上传并预览

前段时间需要进行一个图片上传的操作，虽然之前也操作过，但是一直没有时间整理归纳（没时间都是借口）。现在整理一个图片长传的功能。部分有参考其他博文。
前台主要是放在表格中，同其他信息一起添加的，预览就是通过上传文件后直接onchange()显现的。JSP代码：

<tr>
     <td>身份照片：</td>
     <td>
        <form id="uploadImageForm" action="${ctx}/upLoadxls.do" enctype="multipart/form-data" method="post" target="hiddenFrame">
        <input id="userImagePath" type="file" name="file1"  onchange="addUserImage()" > 
        </form>
     </td>
     <td>
        <div id="showImage"  class="bg-white none"  >
              <img id="personImage" alt="" src="" style="width:100px;height:100px;margin-left:50px">
        </div> 
     </td>
</tr>

对应于JSP的JS代码，主要是预览图片，我的图片就没有存储到文件中，而是直接放在项目中，但是对于图片比较大，且量比较多时，建议还是要放到本地的文件价中，或者压缩处理放到数据库中：

/**
 * 上传图片
 */
function addUserImage(){
    $("#uploadImageForm").ajaxSubmit({
        success:function(data){//图片上传成功时
        var t_div = document.getElementById("showImage");
        t_div.style.display = "block";                     data=data.replace("\"","").replace("\"","");            document.getElementById("personImage").src=ctx+"/personImage/"+data;             document.getElementById("userImagePath").name=data;
     },
     error:function(xhr){
          alert('预览失败！');            
           }
        });
}

后台处理上传代码，如上所说，我就是在webapp下新建了一个文件加，将图片保存在这里：

@RequestMapping(value = "/upLoadxls")
@ResponseBody
public String upLoadxls(final HttpServletRequest request) {
        // 得到上传文件的保存目录，将上传的文件存放于webapp目录下，不允许外界直接访问，保证上传文件的安全
        String savePath = request.getSession().getServletContext().getRealPath("/personImage");
        String fileName=null;
        File file = new File(savePath);
        // 判断上传文件的保存目录是否存在
        if (!file.exists() && !file.isDirectory()) {
            file.mkdir();// 如果文件夹目录不存在，则创建目录
        }
        try {
            // 使用Apache文件上传组件处理文件上传步骤：
            // 1、创建一个DiskFileItemFactory工厂
            DiskFileItemFactory factory = new DiskFileItemFactory();
            // 2、创建一个文件上传解析器
            ServletFileUpload upload = new ServletFileUpload(factory);
            // 解决上传文件名的中文乱码
            upload.setHeaderEncoding("UTF-8");
            // 3、判断提交上来的数据是否是上传表单的数据
            if (!ServletFileUpload.isMultipartContent(request)) {
                // 按照传统方式获取数据
                return null;
            }
            // 4、使用ServletFileUpload解析器解析上传数据，解析结果返回的是一个List<FileItem>集合，每一个FileItem对应一个Form表单的输入项
        List<FileItem> list = upload.parseRequest(request);
            for (FileItem item : list) {
                // 如果fileitem中封装的是普通输入项的数据
                if (item.isFormField()) {
                    String name = item.getFieldName();
                    // 解决普通输入项的数据的中文乱码问题
                    String value = item.getString("UTF-8");
                } else {
                    // 注意：不同的浏览器提交的文件名是不一样的，有些浏览器提交上来的文件名是带有路径的，如：
                    // c:\a\b\1.txt，而有些只是单纯的文件名，如：1.txt
                    // 获取item中的上传文件的输入流
                    InputStream in = item.getInputStream();
                    //添加当前日期作为图片名，并且图片统一格式为png.
                    fileName=new Date().getTime()+".png";
                    // 创建一个文件输出流
                    FileOutputStream out = new FileOutputStream(savePath + "\\" + fileName);
                    // 创建一个缓冲区
                    byte buffer[] = new byte[1024];
                    // 判断输入流中的数据是否已经读完的标识
                    int len = 0;
                    // 循环将输入流读入到缓冲区当中，(len=in.read(buffer))>0就表示in里面还有数据
                    while ((len = in.read(buffer)) > 0) {
                        // 使用FileOutputStream输出流将缓冲区的数据写入到指定的目录(savePath + "\\" + filename)当中
                        out.write(buffer, 0, len);
                    }
                    // 关闭输入流
                    in.close();
                    // 关闭输出流
                    out.close();
                    // 删除处理文件上传时生成的临时文件
                    item.delete();
                }
            }
        } catch (Exception e) {
            LOGGER.error(e.getMessage(),e);

        }
        //返回文件名
        return fileName;
    }

到此图片上传预览的功能就实现了。