JS之解决fakepath问题，并实现base64图片上传(单图上传)

base64 编码转化图片并进行指定路径的保存和上传处理

https://blog.csdn.net/u011415782/article/details/79978608
https://blog.csdn.net/qq_38381336/article/details/77943377
https://blog.csdn.net/yayayangge/article/details/83654464

解决 fakepath

https://blog.csdn.net/weixin_39762926/article/details/79610154

页面 html 中

 <form class="form-horizontal m-t" method="post" enctype="multipart/form-data" action="#"><div class="row"><div class="col-md-6"><div class="image-crop" style="margin-bottom:-20px;"><img class="img-circle" style="width:64px;height:64px;" src="{$avatar}"></div></div><div class="col-md-6" style="margin-top:70px;margin-left:10px;"><h4>图片预览：</h4><div class="btn-group"><label title="上传图片" for="inputImage" class="btn btn-primary"><!-- 方法1 --><img name="image" id="myimage" src="" style="width:80px;height:100px;margin-left:-175px;margin-bottom:20px;"/><input id="files" name="avatar" type="file" value="选择" onchange="changeImge(this)"><input id="successimg" type="hidden" value="" ></label></div></div></div><p></p><label><button class="btn btn-primary-red" id="edit" type="submit">提交</button></label></form>

<script>function changeImge(obj) {var f = obj.files[0];var filePath = obj;var type = f.type;     //image/jpegvar size = f.size;var tp = type.split("/")[0];if (tp != "image" || size > 10*1024*1024){alert("请选择图片-10MB内！")return false;}var element = document.getElementById('myimage');if (filePath != null && filePath != "") {//获取文件路径element.src = window.URL.createObjectURL(obj.files[0]);    // 这个函数用来预览本地图片或者视频// 用下面的两个方法，可以把blob图片格式转成base64图片格式,https://www.zhaokeli.com/article/8055.htmlvar blobToBase64=function(blob, callback) {var a = new FileReader();a.onload = function(e) {callback(e.target.result);}a.readAsDataURL(blob);};//使用方法,传入一个blob数据,在回调中接收处理成功的图片urlblobToBase64(obj.files[0], function(data) {// $('#successimg img').attr('src', data);   // 赋值$('#successimg').val(data);   // 赋值});}
}// 获取 图片地址$('#edit').on('click', function(){var img = $("#successimg").val();   // base64 格式$.ajax({type: 'POST',url:  "/admin/user/save_avatar",data: {url: img},dataType: 'json',success: function(data){if (data.status == 1) {alert("编辑成功");} else {// alert(222);alert("编辑失败");}}});
})// blob 转化成 base64
// function blobToDataURL(blob) {
//         var a = new FileReader();
//         a.readAsDataURL(blob);//读取文件保存在result中
//         a.onload = function (e) {
//         var getRes = e.target.result;//读取的结果在result中
//         }
//  }</script>

控制器中

// 获取新上传的头像public function save_avatar(){// $file = request()->file("avatar");    $data = $_POST;$base64_image_content = $data['url'];$path = $_SERVER['DOCUMENT_ROOT'].'/static/imgs';    // 上传到的文件夹//匹配出图片的格式,将Base64图片转换为本地图片并保存if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){$type = $result[2];$new_file = $path."/".date('Ymd',time())."/";if(!file_exists($new_file)){//检查是否有该文件夹，如果没有就创建，并给予最高权限mkdir($new_file, 0700);}$new_file = $new_file.time().".{$type}";if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))){// "\/E:\/phpstudy2018\/PHPTutorial\/WWW\/h_layui\/public\/static\/imgs\/20191018\/1571384359.jpeg"// return '/'.$new_file;// 修改数据库  sp_admin$udata = session::get('USER_INFO');$uid = $udata['uid'];$where['id'] = $uid;$new = explode('public',$new_file);$bb['touxiang'] = $new[1];$res =  DB::name('admin')->where($where)->update($bb);if($res){$rs=json(1); }else{$rs=json(0); }return $rs;}else{return false;}}else{return false;}die;
}

JS之解决fakepath问题，并实现base64图片上传(单图上传)相关推荐

java itext html转PDF解决中文无法显示以及base64图片处理
文章目录一.添加maven依赖二.处理中文不显示问题三.处理HTML文件中Base64格式图片不显示问题四.封装工具类一.添加maven依赖 <dependency><gr ...
base64图片解码生成图片，上传到指定服务器
问题前端传来的base64截图,需要转换成图片,存储到fastdfs服务器转换失败,生成的图片是空白的解决原因是生成的base64被拼接了一个头部,这个不是图片的一部分,转换时,是需要去掉的 ...
base64图片转换file,并上传到阿里云
第一步:创建base64util package com.yuantu.util; import org.springframework.util.Base64Utils;/*** @author A ...
vue js中解决二进制转图片显示问题
一:问题工作中碰到的问题,在处理接口返回的验证码图片时,由于返回的是encode编码代码,在js端获取到数据之后,通过函数encodeURI()来进行解码,之后可以通过在src中设置来实现图片显示: ...
webpack打开项目命令_配置webpack中dev.env.js、prod.env.js，解决不同命令下项目启动和打包到指定的环境...
前后端分离的项目开发中,我们有开发环境.测试环境.预生产环境和生产环境. 1.开发环境下调试接口的时候,一般都会有好几个接口地址(开发服务器上的,本地的,接口开发人员的,七七八八的接口地址),要根据情 ...
加mp4文件后js失效_Jquery方法load之后导致js失效解决方法
Jquery方法load之后导致js失效解决方法 >>>>>>>>>>>>>>>>>>> ...
IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层、Dialog的问题
IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层.Dialog的问题参考文章: (1)IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层.Dialog的 ...
[转] js前端解决跨域问题的8种方案（最新最全）
[转] js前端解决跨域问题的8种方案(最新最全) 参考文章: (1)[转] js前端解决跨域问题的8种方案(最新最全) (2)https://www.cnblogs.com/chris-oil/p/ ...
利用PDF.JS插件解决了本地pdf文件在线浏览问题（根据需要隐藏下载功能，只保留打印功能）
利用PDF.JS插件解决了本地pdf文件在线浏览问题(根据需要隐藏下载功能,只保留打印功能) 参考文章: (1)利用PDF.JS插件解决了本地pdf文件在线浏览问题(根据需要隐藏下载功能,只保留打印功 ...
npm突然找不到D:\nodejs\node_modules\npm\bin\npm-cli.js的解决方法
npm突然找不到D:\nodejs\node_modules\npm\bin\npm-cli.js的解决方法参考文章: (1)npm突然找不到D:\nodejs\node_modules\npm\b ...

JS之解决fakepath问题，并实现base64图片上传(单图上传)

JS之解决fakepath问题，并实现base64图片上传(单图上传)相关推荐

最新文章

热门文章

JS之 解决fakepath问题，并实现base64图片上传(单图上传)

JS之 解决fakepath问题，并实现base64图片上传(单图上传)相关推荐

最新文章

热门文章

JS之解决fakepath问题，并实现base64图片上传(单图上传)

JS之解决fakepath问题，并实现base64图片上传(单图上传)相关推荐