使用说明：新建文件，直接复制粘贴，保存文件为html 格式，在浏览器运行即可；
第一种：
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2<html> 3 <head> 4 <title> New Document </title> 5 </head> 6 7 <script src="http://i.gtimg.cn/qzone/biz/gdt/lib/jquery/jquery-2.1.4.js?max_age=31536000"></script> 8 9 <script> 10 11 $(function(){ 12 $('#upLoad').on('change',function(){ 13 var filePath = $(this).val(), //获取到input的value，里面是文件的路径 14 fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(), 15 imgBase64 = '', //存储图片的imgBase64 16 fileObj = document.getElementById('upLoad').files[0]; //上传文件的对象,要这样写才行，用jquery写法获取不到对象 17 18 // 检查是否是图片 19 if( !fileFormat.match(/.png|.jpg|.jpeg/) ) { 20 alert('上传错误,文件格式必须为：png/jpg/jpeg'); 21 return; 22 } 23 24 // 调用函数，对图片进行压缩 25 compress(fileObj,function(imgBase64){ 26 imgBase64 = imgBase64; //存储转换的base64编码 27 $('#viewImg').attr('src',imgBase64); //显示预览图片 28 }); 29 }); 30 31 // 不对图片进行压缩，直接转成base64 32 function directTurnIntoBase64(fileObj,callback){ 33 var r = new FileReader(); 34 // 转成base64 35 r.onload = function(){ 36 //变成字符串 37 imgBase64 = r.result; 38 console.log(imgBase64); 39 callback(imgBase64); 40 } 41 r.readAsDataURL(fileObj); //转成Base64格式 42 } 43 44 // 对图片进行压缩 45 function compress(fileObj, callback) { 46 if ( typeof (FileReader) === 'undefined') { 47 console.log("当前浏览器内核不支持base64图标压缩"); 48 //调用上传方式不压缩 49 directTurnIntoBase64(fileObj,callback); 50 } else { 51 try { 52 var reader = new FileReader(); 53 reader.onload = function (e) { 54 var image = $('<img/>'); 55 image.load(function(){ 56 square = 700, //定义画布的大小，也就是图片压缩之后的像素 57 canvas = document.createElement('canvas'), 58 context = canvas.getContext('2d'), 59 imageWidth = 0, //压缩图片的大小 60 imageHeight = 0, 61 offsetX = 0, 62 offsetY = 0, 63 data = ''; 64 65 canvas.width = square; 66 canvas.height = square; 67 context.clearRect(0, 0, square, square); 68 69 if (this.width > this.height) { 70 imageWidth = Math.round(square * this.width / this.height); 71 imageHeight = square; 72 offsetX = - Math.round((imageWidth - square) / 2); 73 } else { 74 imageHeight = Math.round(square * this.height / this.width); 75 imageWidth = square; 76 offsetY = - Math.round((imageHeight - square) / 2); 77 } 78 context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight); 79 var data = canvas.toDataURL('image/jpeg'); 80 //压缩完成执行回调 81 callback(data); 82 }); 83 image.attr('src', e.target.result); 84 }; 85 reader.readAsDataURL(fileObj); 86 }catch(e){ 87 console.log("压缩失败!"); 88 //调用直接上传方式 不压缩 89 directTurnIntoBase64(fileObj,callback); 90 } 91 } 92 } 93}); 94 95 </script> 96 97 <body> 98 <input type="file" id="upLoad" name="image" > 99 <!-- 显示上传之后的图片 --> 100 <div id='previewImg'> 101 <img src="" id='viewImg'/> 102 </div> 103</body> 104</html>
第二种：
1<!doctype html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6</head> 7<body> 8<input type="file"><br> 9<img src="" height="200" alt="Image preview area..." title="preview-img"> 10<script> 11 var fileInput = document.querySelector('input[type=file]'), 12 previewImg = document.querySelector('img'); 13 fileInput.addEventListener('change', function () { 14 var file = this.files[0]; 15 var reader = new FileReader(); 16 // 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片 17 reader.addEventListener("load", function () { 18 previewImg.src = reader.result; 19 }, false); 20 // 调用reader.readAsDataURL()方法，把图片转成base64 21 reader.readAsDataURL(file); 22 }, false); 23</script> 24</body> 25</html>