HTML5上传图片，后台使用java

1、html代码

引用的js如下：

<script src="${base_path}/view/html/js/flexible.js"></script> <script src="${base_path}/view/html/lib/jquery.js"></script> <script src="${base_path}/view/html/lib/mobileBUGFix.mini.js"></script> <script src="${base_path}/view/html/lib/fastclick/fastclick.js"></script> <script src="${base_path}/view/html/lib/exif.js"></script> <script src="${base_path}/view/html/lib/jquery.base64.min.js"></script> <script src="${base_path}/view/html/js/common.js"></script> <script src="${base_path}/view/html/js/membercenter/certification.js"></script>

html代码

<div class="certification-item"> <!-- 未上传之前，显示提示上传信息，通过给div.certification-item-tips添加hidden类来控制隐藏 --> <div class="certification-item-content"> <img class="photo" id="uploadImage_1" src="${base_path}/view/html/images/tmp/s1.jpg" alt="身份证正面照"> <input value="拍照" accept="image/*" type="file" id="uploadImage_1" capture="camera" onchange="selectFileImage(this,'uploadImage_1');" /> </div> </div>

2、js代码

function selectFileImage(fileObj,uploadImage_n) { var file = fileObj.files['0']; //图片方向角 added by lzk var Orientation = null; if (file) { console.log("正在上传,请稍后..."); var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式 if (!rFilter.test(file.type)) { showMyTips("请选择jpeg、png格式的图片", false); return; } // var URL = URL || webkitURL; //获取照片方向角属性，用户旋转控制 EXIF.getData(file, function() { // alert(EXIF.pretty(this)); EXIF.getAllTags(this); //alert(EXIF.getTag(this, 'Orientation')); Orientation = EXIF.getTag(this, 'Orientation'); //return; }); var oReader = new FileReader(); oReader.onload = function(e) { //var blob = URL.createObjectURL(file); //_compress(blob, file, basePath); var image = new Image(); image.src = e.target.result; image.onload = function() { var expectWidth = this.naturalWidth; var expectHeight = this.naturalHeight; if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) { expectWidth = 800; expectHeight = expectWidth * this.naturalHeight / this.naturalWidth; } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) { expectHeight = 1200; expectWidth = expectHeight * this.naturalWidth / this.naturalHeight; } //alert(expectWidth+','+expectHeight); var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.width = expectWidth; canvas.height = expectHeight; ctx.drawImage(this, 0, 0, expectWidth, expectHeight); //alert(canvas.width+','+canvas.height); var base64 = null; var mpImg = new MegaPixImage(image); mpImg.render(canvas, { maxWidth: 800, maxHeight: 1200, quality: 0.8, orientation: Orientation }); base64 = canvas.toDataURL("image/jpeg"); uploadImage(base64.substring(23)); $("#"+uploadImage_n).attr("src", base64); }; }; oReader.readAsDataURL(file); } }

/** 记录上传数据 */ function uploadImage(imageData) { if (imageData) { $.ajax({ type:"POST", async: false, url: basepath+"/rest/app/memberCenter/uploadImgs", contentType:'application/x-www-form-urlencoded; charset=utf-8', data: { fileData: imageData, fileName: $("#hid_identityCard").val(), uuidUser: $("#hid_uuidUser").val() }, dataType:"json", timeout: 1000, success: function(result) { console.log(result); if(result.reCode == "1001"){ alert('上传成功！'); }else if(result == false){ alert('上传失败！'); } } }); } }

3、java后台代码

3.1 springcontroller

/** * 上传身份证证件图片 * @param request * @param response */ @RequestMapping(value="/uploadImgs",method=RequestMethod.POST) public void uploadImgs(HttpServletRequest request,HttpServletResponse response){ String fileData = request.getParameter("fileData");//Base64编码过的图片数据信息，对字节数组字符串进行Base64解码 String uuidUser = request.getParameter("uuidUser"); String fileName = request.getParameter("fileName"); long t = System.currentTimeMillis(); Random rd = new Random(t); int v = rd.nextInt(); String userImgs = fileUploadService.uploadFile(fileData, fileName+"_"+String.valueOf(v)); //String userImgs = ConfigUtil.getProperty("user.imgs"); //ResultModel resultModel=fileUploadService.fileUpload(file, userImgs); Ghuser currentUser = currentUser(); String uname = currentUser.getUname(); boolean result = false;//最终上传成功与否的标志 Ghuserrelevanceimgs Ghuserrelevanceimgs = new Ghuserrelevanceimgs(); Ghuserrelevanceimgs.setRelevanceimg(userImgs); Ghuserrelevanceimgs.setUserRelevanceId(Integer.valueOf(uuidUser)); Ghuserrelevanceimgs.setCreatetime(new Date()); Ghuserrelevanceimgs.setCreatename(uname); JSONObject jsrs = ghuserrelevanceService.insertGhuserrelevanceImg(Ghuserrelevanceimgs); PrintWriter pw = null; try { pw = response.getWriter(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } pw.print(jsrs.toString()); pw.close(); }

3.2 springservice代码

/** * 文件上传 * @param fileData * @param fileName * @return */ public String uploadFile(String fileData,String fileName){ //在自己的项目中构造出一个用于存放用户照片的文件夹 String userImgs = ConfigUtil.getProperty("user.imgs"); //如果此文件夹不存在则创建一个 File f = new File(userImgs); if(!f.exists()){ f.mkdir(); } //拼接文件名称，不存在就创建 userImgs = userImgs + fileName + ".jpg"; f = new File(userImgs); //使用BASE64对图片文件数据进行解码操作 BASE64Decoder decoder = new BASE64Decoder(); try { //通过Base64解密，将图片数据解密成字节数组 byte[] bytes = decoder.decodeBuffer(fileData); //构造字节数组输入流 ByteArrayInputStream bais = new ByteArrayInputStream(bytes); //读取输入流的数据 BufferedImage bi = ImageIO.read(bais); //将数据信息写进图片文件中 ImageIO.write(bi, "jpg", f);// 不管输出什么格式图片，此处不需改动 bais.close(); } catch (IOException e) { } return userImgs; }

保存数据库的部分省略，有借鉴网上的大侠的内容，做了一下整合。