1、在jsp页面添加上传,点击按钮,点击触发上传图片事件
<input class="image_bg" type="file" style="display: none;" id="file" accept="image/*" />
2、在引用的js里面添加方法,这里需要首先引入jquery
//允许上传的图片类型 var allowTypes = [ 'image/jpg', 'image/jpeg', 'image/png' ]; // 500kb var maxSize = 1024 * 1024; // 图片最大宽度 var maxWidth = 1920; // 图片最大高度 var maxHeight = 1080; // 最大上传图片数量,限制两张 var maxCount = 1; $(".image_bg").on('change', function(event) { readFile(event); }); function readFile(event) { var files = event.target.files; // 如果没有选中文件,直接返回 if (files.length === 0) { return; } var file = files[files.length - 1]; var reader = new FileReader(); // 如果类型不在允许的类型范围内 if (allowTypes.indexOf(file.type) === -1) { AlertDialog('该类型不允许上传'); return; } console.log('size===' + file.size) console.log('filewidth==' + file.width) console.log('fileheight==' + file.height) if (file.size > maxSize) { AlertDialog("图片超过" + (maxSize / 1024) + "KB,不允许上传!"); return; } reader.onload = function(e) { var img = new Image(); img.onload = function() { console.log('width==' + img.width) console.log('height==' + img.height) var w = img.width; var h = img.height; var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // 设置 canvas 的宽度和高度 canvas.width = w; canvas.height = h; ctx.drawImage(img, 0, 0, w, h); var imgbase64 = canvas.toDataURL('image/jpeg'); // console.log(imgbase64); /** 将上传的图片转码到页面区域 */ var start = imgbase64.indexOf('base64,') + 7; imgbase64 = imgbase64.substring(start, imgbase64.length); imgbase64 = imgbase64.replace(/+/g, "%2B"); $.ajax({ contentType : "application/x-www-form-urlencoded; charset=utf-8", type : "post", url : htmlVal.htmlUrl + "?uploadimage=", data : { image : imgbase64 }, success : function(result) { if (result == "ok") { location.href = location.href; } if (result == "images_up_to_limit") { AlertDialog("该类型图片到达上限"); } if (result == "10002") { AlertDialog("参数错误!"); } } }) img = null; }; img.src = e.target.result; }; reader.readAsDataURL(file); } /** * 删除图片 */ function deleteImage() { ConfirmDialog("确定删除吗?", function() { $.ajax({ contentType : "application/x-www-form-urlencoded; charset=utf-8", type : "post", url : htmlVal.htmlUrl + "?deleteimage=", success : function(result) { if (result == "error") { AlertDialog("删除失败"); } if (result == "ok") { location.href = location.href; } } }) }, function() { }) }
3、后台处理上传的图片base64编码,将编码转成图片
/** * 上传图片 * @return */ @HandlesEvent("uploadimage") public Resolution doUploadImage() { System.out.println("SaleSetting.doUploadImage()"); logRequest(); // if (school.getIndexImage() != null && !school.getIndexImage().trim().equals("")){ // return getStringResolution("images_up_to_limit"); // } String imageBase = getParam("image", ""); int userId = getCurrentUserId(); String imageType = "SchoolIndexImage"; String imagePath = saveImage(imageBase, userId, imageType); school.setIndexImage(imagePath); cmService.updateSchool(school); return getStringResolution("ok"); } /** * 保存图片,根据图片的类型存储图片路径 * @param imageBase * @param userId * @param imageType * @return 返回上传图片的路径 */ private String saveImage(String imageBase, int userId, String imageType) { String data = ""; try{ data = URLDecoder.decode(imageBase, "UTF-8"); } catch (UnsupportedEncodingException e){ e.printStackTrace(); } if (data == null || data.contentEquals("")){ return ""; } int now = Utils.currentSeconds(); String filePath = "sale/" + userId + "/" + imageType; String dir = Constants.PATH_FILE + filePath; Utils.makeSureDirExists(dir); String path = dir + "/" + now + ".jpg"; Utils.generateImageFromBase64(data, path); return filePath + "/" + now + ".jpg"; }
Utils.java 工具类
package util; import java.io.File; import java.io.FileOutputStream; import java.io.OutputStream; import java.io.Serializable; import sun.misc.BASE64Decoder; /** * @author dayu * @version 创建时间:2018年5月8日 上午9:55:16 类说明 */ public class Utils implements Serializable { private static final long serialVersionUID = -5714133117682920152L; public static int currentSeconds() { return (int)(System.currentTimeMillis() / 1000L); } public static File makeSureDirExists(String dirPath) { File dir = new File(dirPath); if (!dir.exists()) { dir.mkdirs(); } return dir; } // base64字符串转化成图片 public static boolean generateImageFromBase64(String imgStr, String path) { // 对字节数组字符串进行Base64解码并生成图片 if (imgStr == null) // 图像数据为空 return false; BASE64Decoder decoder = new BASE64Decoder(); try{ // Base64解码 byte[] b = decoder.decodeBuffer(imgStr); for (int i = 0; i < b.length; ++i){ if (b[i] < 0){// 调整异常数据 b[i] += 256; } } // 生成jpeg图片 // String imgFilePath = "d://222.jpg";//新生成的图片 OutputStream out = new FileOutputStream(path); out.write(b); out.flush(); out.close(); return true; } catch (Exception e){ return false; } } }