图片上传预览的实现

1、要提交的form

    <form id="submit_form"  target="exec_target" enctype="multipart/form-data" οnsubmit="return saveReport();">
         
          <img src="" id="yushow" οnclick="uploadBtn();"/>          
          <input type="file" name="file" style="display:none;" οnchange="previewImg(this);" id="upload" accept="image/*"/>
          <br>
          <input value="确认上传" type="submit">
          
          <input type="hidden" name="userIdCode" id="userIdCode">
          <input type="hidden" name="typeCode" id="typeCode" value="1">
         </form>  
2、利用formData、ajax  实现页面form提交但不跳转

function saveReport() {
         // mulitipart form,如文件上传类
        var file=$("#upload")[0].files[0];
        var userIdCode=$("#userIdCode").val();
        var typeCode=$("#typeCode").val();
        
        var formData = new FormData();
        formData.append('file',file);
        formData.append('userIdCode',userIdCode);
        formData.append('typeCode',typeCode);
        
        　$.ajax({
            url:"/Common/UploadServlet",            
            type:'POST',
            cache:false,
            data:formData,
            processData:false,
            contentType:false,
            success:function(data){
                alert(data);
            },
            error: function(data) {  
                alert("Connection error:"+data);  
            }
    
        
        })
        return false; // 必须返回false，否则表单会自己再做一次提交操作，并且页面跳转
    }

3、图片的预览

    function uploadBtn(){
            $("#upload").click();
        }
    
    //图片预览
    function previewImg(imgFile){
        //console.log(imgFile);//这里打印出是整个input标签
        var extension = imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);//扩展名
        extension = extension.toLowerCase();//把文件扩展名转换为小写
        if ((extension!='.jpg')&&(extension!='.gif')&&(extension!='.jpeg')&&(extension!='.png')&&(extension!='.bmp')){
            layer.msg("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");
            $(".btn-uploading").focus();//将焦点定位在文件上传的按钮上，可以直接按确定键再次触发
        }else{
            var path;//预览地址
            if(document.all){//IE
                imgFile.select();
                    path = document.selection.createRange().text;
            }else{//火狐，谷歌
                path = window.URL.createObjectURL(imgFile.files[0]);
            }
            $("#yushow").attr("src",path);//设置预览地址
  
        }
    }

4、后台的实现

@RequestMapping(value = "/Common/UploadServlet",method = RequestMethod.POST)
    @ResponseBody
    public synchronized int UploadServlet(HttpServletRequest request) throws Exception {
        int code =0;
        if (request instanceof MultipartHttpServletRequest) {
            MultipartFile file =  ((MultipartHttpServletRequest) request).getFile("file");
        
        if(!file.isEmpty()) {
            System.out.println("==================开始上传图片=====================");
            String message = System.currentTimeMillis() + file.getOriginalFilename();//现在的文件名是时间戳加原文件名，出现图片相同时，读取不出来的bug
            String realPath = request.getSession().getServletContext().getRealPath("/static/newimages/");//将文件保存在当前工程下的一个upload文件
            FileUtils.copyInputStreamToFile(file.getInputStream(), new File(realPath, message));//将文件的输入流输出到一个新的文件
            String savePath="/static/newimages/"+message;
            System.out.println("======================"+realPath+"=======================");
            code=1;
        
        return code;
    }