html上传图片
方案一
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><title>頭像</title> </head><script src="http://i.gtimg.cn/qzone/biz/gdt/lib/jquery/jquery-2.1.4.js?max_age=31536000"></script><script src="js/avator.js"></script><body> <input type="file" id="upLoad" name="image"> <!-- 顯示上傳之后的圖片 --> <div id='previewImg'><img src="" id='viewImg' style="height: 200px;"/> </div> <button id="submit">提交</button></body> </html> $(function () {var imgsrc = ''$("#submit").click(function () {alert(imgsrc);$.ajax({url: '/avatar',type: 'POST',dataType: 'json',data: {'imgsrc': imgsrc},success: function (res) {alert('666');},error: function () {alert('123');}});});$('#upLoad').on('change', function () {var filePath = $(this).val(), //獲取到input的value，里面是文件的路徑fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),imgBase64 = '', //存儲圖片的imgBase64fileObj = document.getElementById('upLoad').files[0]; //上傳文件的對象,要這樣寫才行，用jquery寫法獲取不到對象// 檢查是否是圖片if (!fileFormat.match(/.png|.jpg|.jpeg/)) {alert('上傳錯誤,文件格式必須為：png/jpg/jpeg');return;}alert(fileObj.size / 1024);if (fileObj.size / 1024 > 20000) {// alert('大于200k');// 調用函數，對圖片進行壓縮compress(fileObj, function (imgBase64) {imgBase64 = imgBase64; //存儲轉換的base64編碼imgsrc = imgBase64;$('#viewImg').attr('src', imgBase64); //顯示預覽圖片});} else {// alert('小于200k');// 調用函數，不對圖片進行壓縮directTurnIntoBase64(fileObj, function (imgBase64) {imgBase64 = imgBase64; //存儲轉換的base64編碼imgsrc = imgBase64;$('#viewImg').attr('src', imgBase64); //顯示預覽圖片});}});// 不對圖片進行壓縮，直接轉成base64function directTurnIntoBase64(fileObj, callback) {var r = new FileReader();// 轉成base64r.onload = function () {//變成字符串imgBase64 = r.result;console.log(imgBase64);callback(imgBase64);}r.readAsDataURL(fileObj); //轉成Base64格式}// 對圖片進行壓縮function compress(fileObj, callback) {if (typeof (FileReader) === 'undefined') {console.log("當前瀏覽器內核不支持base64圖標壓縮");//調用上傳方式不壓縮directTurnIntoBase64(fileObj, callback);} else {try {var reader = new FileReader();reader.onload = function (e) {var image = $('<img/>');image.load(function () {square = 390, //定義畫布的大小，也就是圖片壓縮之后的像素canvas = document.createElement('canvas'),context = canvas.getContext('2d'),imageWidth = 0, //壓縮圖片的大小imageHeight = 0,offsetX = 0,offsetY = 0,data = '';canvas.width = square;canvas.height = square;context.clearRect(0, 0, square, square);if (this.width > this.height) {imageWidth = Math.round(square * this.width / this.height);imageHeight = square;offsetX = -Math.round((imageWidth - square) / 2);} else {imageHeight = Math.round(square * this.height / this.width);imageWidth = square;offsetY = -Math.round((imageHeight - square) / 2);}context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);var data = canvas.toDataURL('image/jpeg');//壓縮完成執行回調callback(data);});image.attr('src', e.target.result);};reader.readAsDataURL(fileObj);} catch (e) {console.log("壓縮失敗!");//調用直接上傳方式 不壓縮directTurnIntoBase64(fileObj, callback);}}} });方案2
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body> <input type="file"><br> <img src="" height="200" alt="Image preview area..." title="preview-img"> <script>var fileInput = document.querySelector('input[type=file]'),previewImg = document.querySelector('img');fileInput.addEventListener('change', function () {var file = this.files[0];var reader = new FileReader();// 監聽reader對象的的onload事件，當圖片加載完成時，把base64編碼賦值給預覽圖片reader.addEventListener("load", function () {previewImg.src = reader.result;}, false);// 調用reader.readAsDataURL()方法，把圖片轉成base64reader.readAsDataURL(file);}, false); </script> </body> </html>參考：
https://www.cnblogs.com/xh_Blog/p/8269581.html
總結
- 上一篇： python 字符串匹配 正则 re
- 下一篇： Jinja2 模板用法