微信端上传图片方式1

1.H5的图片上传方式

前台代码:

<form action="<%=basePath%>open/njResult.shtml"  id="njForm"  method="post">
     <input id="photoPath"  type="hidden" name="photoPath">
  </form>
      　　<div class="noUld_upB g-clear">
            　　　　<div class="noUld_up">
                      <img class="noUld_up_img" data-up="img" src="<%=basePath %>resources/img/all/other_addImg.png">
                      <div class="noUld_up_cnt g-clear">
                          <div class="fl">请上传图片</div>
                          <div class="noUld_up_cnt_r"><span class="btn-s">上传</span><input type="file" id="notPassPhoto" data-up="file"></div>
                     </div>
                 </div>
　　　　　　
　　　　　　　　<div class="yesCek_submit">
　　　　　　　　　　<a id="njSumit" href="javascript:void(0)" class="btn-b">提交</a>
　　　　　　　　</div>

JS代码:

//图片上传change事件
        $("#notPassPhoto ").change(function(){
            uploadBtnChange("notPassPhoto","photoPath");//上传图片改变时,调用base64压缩方法
            
        });
$('#njSumit').click(function(){
    var photoPath = document.getElementById('photoPath').value;//获得压缩后的base64数据
if(photoPath){
                    var ranparam = Math.random();
                    $.ajax({
                            url:"njNotPassPhoto.shtml",
                            type: "POST",
                            data:{'notPassphotoPath':photoPath,"ranparam":ranparam}, //把base64数据传到后台,由后台解码上传到服务器
                            async : false,
                        cache : false,
                            success:function(data) {
                                if(data.status==200){
                                    $("#photoPath").val(data.photoPath);//获得了传回来的图片路径,用于保存到数据库
                                    $("#njForm").submit();//表单提交
                                }else{
                                      alert(data.msg);
                                  }
                             },
                            error: function(XMLHttpRequest, textStatus, errorThrown){  
                                alert(XMLHttpRequest.readyState + XMLHttpRequest.status + XMLHttpRequest.responseText); 
                        }
                          });
                    }else{
                                alert("请上传照片")
                                return
                            }
            }
                        
        });
 function uploadBtnChange(id,val){
            var scope = this;
            if(window.File && window.FileReader && window.FileList && window.Blob){ 
                // 获取上传file
                var filefield = document.getElementById(id),
                    file = filefield.files[0];
                // 获取用于存放压缩后图片base64编码
                var compressValue = document.getElementById(val);
                processfile(file,compressValue);
            }else{
                alert("此浏览器不完全支持压缩上传图片");
            }
        }

        function processfile(file,compressValue) {
            var reader = new FileReader();
            reader.onload = function (event) {
                var blob = new Blob([event.target.result]); 
                window.URL = window.URL || window.webkitURL;
                var blobURL = window.URL.createObjectURL(blob); 
                var image = new Image();
                image.src = blobURL;
                image.onload = function() {
                    var resized = resizeMe(image); 
                    compressValue.value = resized;
                }
            };
            reader.readAsArrayBuffer(file);
        }

        function resizeMe(img) {
            // 压缩的大小
            var max_width = 800; 
            var max_height = 600; 

            var canvas = document.createElement('canvas');
            var width = img.width;
            var height = img.height;
            if(width > height) {
                if(width > max_width) {
                    height = Math.round(height *= max_width / width);
                    width = max_width;
                }
            }else{
                if(height > max_height) {
                    width = Math.round(width *= max_height / height);
                    height = max_height;
                }
            }

            canvas.width = width;
            canvas.height = height;

            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, width, height);
            // 压缩率
            return canvas.toDataURL("image/jpeg",0.92); 
        }     

后台代码:

/**
     * Base64解码上传
     */
    @RequestMapping(value = "/njNotPassPhoto", method = RequestMethod.POST)
    @ResponseBody
    public Map<String, Object> njNotPassPhoto(String notPassphotoPath) {
        try {
            String photoPath = FileUploadUtils.getPath(notPassphotoPath);
            resultMap.put("status", 200);
            resultMap.put("photoPath", photoPath);
            return resultMap;
        } catch (Exception e) {
            e.printStackTrace();
            resultMap.put("status", 500);
            resultMap.put("msg", "服务器异常");
        }
        return null;

    }

FileUploadUtils工具类代码:

public class FileUploadUtils {
    private static SimpleDateFormat format = new SimpleDateFormat("yyyyMMdd");

    public static String getPath(String base64) throws IOException {

        String saveFileName = System.currentTimeMillis()
                + RandomStringUtils.random(6, true, true) + ".jpg";
        Date date = new Date();
        String datePath = format.format(date);
        String upload = "D:\suyi\photo\" + datePath + "\";

        String path = upload + saveFileName;
        // base64图片解码
        // 对字节数组字符串进行Base64解码并生成图片
        if (base64 == null) // 图像数据为空
            return "";
        base64 = base64.replaceAll("data:image/jpeg;base64,", "");
        BASE64Decoder decoder = new BASE64Decoder();
        byte[] b = decoder.decodeBuffer(base64);
        for (int i = 0; i < b.length; ++i) {
            if (b[i] < 0) {// 调整异常数据
                b[i] += 256;
            }
        }

        File dir = new File(upload);
        if (!dir.exists()) {
            dir.mkdirs();
        }
        String fileName = path;
        File file = new File(fileName);
        OutputStream out = new FileOutputStream(file);
        out.write(b);
        out.flush();
        out.close();
        String ImagePath = "/suyi/showImage?imgId=" + datePath + "_"
                + saveFileName;
        return ImagePath;

    }
}