照片上传预览并保存的功能

一、现在jsp中定义一个上传文件的form表单

<form id="imgForm" action="" method="post" enctype="multipart/form-data">
        <p class="upload clearfix">

             <!-- 其中 真正的上传input隐藏在了上传照片的下面，这样可以给上传按钮自定义样式，大小与外层样式一致 -->
             <input type="file" name="picFile" id="imgUrl" οnchange="changepic(this)" 

                         style="overflow: hidden;position: absolute;left:   75px;margin-top: 20px;float: left;width: 74px;height: 74px;">
            <a href="###" id="showFile" style="position: relative;"><i></i><span>上传照片</span></a>
            <b><img id="img" src=""></b>  <!-- 展示上传之后的图片 -->
        </p>

        <!--传递手机号，作为该用户存放照片的文件夹 -->
        <input name="imgMobile" type="hidden" value="<%=mobile1%>" id="imgMobile">   

       <!-- 传递自定义照片的名称（不重复） -->
        <input name="imgName" type="hidden" value="" id="imgName"> 
    </form>

二、在js当上传图片后异步提交表单

//捕获上传文件状态
function changepic(){

    //ie9及以下不兼容这个fileReader();
     var reads= new FileReader();
     file = document.getElementById('imgUrl').files[0];
     reads.readAsDataURL(file);
     reads.οnlοad=function (e) {
         var fileName = $("#imgUrl").val();
         var fileType = fileName.substring(fileName.lastIndexOf(".")+1);
         if(fileType=="jpg" || fileType=="JPG" || fileType=="jpeg" || fileType=="JPEG" || fileType=="png" || fileType=="PNG"){
             var filename = 'thjdpx' + (Math.random()+'').substr(2) + "." + fileType; //动态生成图片的名字，用于后期存到数据库中
             $("#imgName").val(filename);
             var formData = new FormData(document.getElementById("imgForm"));
            //使用ajax异步提交表单的时候的参数data要设置成formData,要按照这样写，否则后台接收不到上传的文件 

            $.ajax({
                type : "POST",
                url : "/patch/thjdpx/action/thjdpxPeOfflineTraineeInfo_saveOfflineTraineeImg.action", //调用保存图片的方法
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                dataType : 'json',
                error: function(request) {
                    $("#message").html("照片上传失败。");
                    $("#eject").show();
                },
                success: function(data) {
                    //data = eval("(" + data + ")");
                    if(data.success == "true"){
                        $("#img").attr('src',data.imgPath);
                        $("#imgUrl1").val(data.imgPath);        
                    }else{
                        $("#img").attr('src',data.imgPath);
                        $("#imgUrl1").val(data.imgPath);
                        $("#message").html("照片上传失败。");
                        $("#eject").show();
                    }
                }
            })
         }else{
             $("#message").html("请上传jpg、png、jpeg格式的文件。");
             $("#eject").show();
         }
     };
}

三、java代码中的写法，上传图片的方法

    /**
     * 上传照片的方法
     * 返回图片在服务器中的路径和上传状态
     */
    public String saveOfflineTraineeImg(){
        HttpServletRequest request = ServletActionContext.getRequest();
        Map<String, String> map = new HashMap<String, String>();
        String imgMobile = request.getParameter("imgMobile");    //获取表单中的手机号
        String imgName = request.getParameter("imgName");   

       //定义服务器中存放图片的文件夹路径，为减少一个文件夹的承载能力，这个给每个学员创建了一个自己的文件夹，图片上传到自己所在的文件夹中。
        String filePath = "/incoming/export/" + imgMobile ;   
        String realPath = ServletActionContext.getServletContext().getRealPath(filePath);
        String imgPath = "";
        map.put("success", "false");
        map.put("message", "上传失败。");
        //文件上传使用的组件，先创建一个工厂然后获取
        DiskFileItemFactory factory = new DiskFileItemFactory();

        // 负责处理上传的文件数据，并将表单中每个输入项封装成一个FileItem 对象中
        ServletFileUpload upload = new ServletFileUpload(factory);
        if(StringUtils.isNotBlank(imgMobile)){
            try {
                request.setCharacterEncoding("UTF-8");    //设置编码格式
                List<FileItem> items = upload.parseRequest(request);  //将表单的每个输入项存放到list表单中
                Iterator<FileItem> itr = items.iterator();
                while (itr.hasNext()) {    //循序表单传入的文件
                    FileItem item = (FileItem) itr.next();
                    //查看该学员的图片文件夹是否存在，不存在则创建此文件夹
                    File realFile = new File(realPath);
                    if  (!realFile .exists()  && !realFile .isDirectory())      
                    {
                        realFile.mkdirs(); //创建文件夹 ，多级目录一同创建
                    }
                    if (!item.isFormField()) {
                        //如果文件不为空
                        if(item.getName() !=null && !item.getName().equals("")) {
                             File tempFile = new File(item.getName());//获取上传的文件
                             File file = new File(realPath,imgName);//新建一个文件
                             try {
                                item.write(file);//将原文件写入新文件中    
                                imgPath = filePath + "/" + imgName;     //返回图片路径到jsp中，方便后期保存到数据库的操作
                                map.put("imgPath", imgPath);
                                map.put("success", "true");
                                map.put("message", "上传成功。");
                            } catch (Exception e) {                            
                                e.printStackTrace();
                            }             
                        }                
                    }
                }        
            } catch ( FileUploadException | UnsupportedEncodingException e1) {
                e1.printStackTrace();
            }
        }        
        this.setJsonString(JsonUtil.toJSONString(map));
        return "json";
    }