🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## html代码 ``` <html> <head> <meta charset="utf-8"> <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script> <title>文件上传</title> </head> <body> <input id="good_img" name="good_img" class="weui-uploader__input" type="file" accept="image/*" multiple=""> <input type="hidden" id="imgBase64"> <button type="button" id="upload_btn">上传</button> <div class="upload_div"></div> </body> </html> ``` ## js代码 ``` <script> $('#upload_btn').click(function(){ var img = $('#imgBase64').val(); if (img) { console.log(111); }else{ alert('请选择上传图片'); } }) //图片上传 $("#good_img").on('change',function(){ var filePath = $(this).val(), //获取到input的value,里面是文件的路径 fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(), imgBase64 = '', //存储图片的imgBase64 fileObj = this.files[0]; //上传文件的对象,要这样写才行,用jquery写法获取不到对象 // 检查是否是图片 if( !fileFormat.match(/.png|.jpg|.jpeg/) ) { alert('上传错误,文件格式必须为:png/jpg/jpeg'); return; } // 调用函数,对图片进行压缩 compress(fileObj,function(imgBase64){ imgBase64 = imgBase64; //存储转换的base64编码 $('#imgBase64').val(imgBase64); var str='<img src="'+imgBase64+'"/>'; $(".upload_div").html(str); }); }); // 不对图片进行压缩,直接转成base64 function directTurnIntoBase64(fileObj,callback){ var r = new FileReader(); // 转成base64 r.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 if(fileObj.size<250000){ //图片小于250k就不压缩 console.log("不需要压缩"); directTurnIntoBase64(fileObj,callback); } else { try { var reader = new FileReader(); reader.onload = function (e) { var image = $('<img/>'); image.load(function(){ square = 700, //定义画布的大小,也就是图片压缩之后的像素 canvas = document.createElement('canvas'), context = canvas.getContext('2d'), imageWidth = 0, //压缩图片的大小 imageHeight = 0, offsetX = 0, offsetY = 0, data = ''; canvas.width = this.width; canvas.height = this.height; context.clearRect(0, 0, square, square); context.drawImage(this, 0, 0, this.width, this.height); var data = canvas.toDataURL('image/jpeg'); //压缩完成执行回调 callback(data); }); image.attr('src', e.target.result); }; reader.readAsDataURL(fileObj); }catch(e){ console.log("压缩失败!"); //调用直接上传方式 不压缩 directTurnIntoBase64(fileObj,callback); } } } </script> ```