上传文件时，有时候需要获取文件路径，但是浏览器安全机制，使得路径被fakepath代替，获取不到
下面的代码解决这个问题，支持Chrome，其它浏览器没测试，用的时候注意
代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>上传file属性</title> <script src="jquery.min.js"></script> </head> <body> <input id="input-file" class="upload" type="file" value=""> <img src="" alt=""> </body> <script> $(function(){ $('.upload').change(function(){ var oFReader = new FileReader(); var file = document.getElementById('input-file').files[0]; oFReader.readAsDataURL(file); oFReader.onloadend = function(oFRevent){ var src = oFRevent.target.result; $('img').attr('src',src); } }) }) </script> </html>
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>js
<script> function changeImge(obj) { var f = obj.files[0]; var filePath = obj; var type = f.type; //image/jpeg var 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.html var blobToBase64=function(blob, callback) { var a = new FileReader(); a.onload = function(e) { callback(e.target.result); } a.readAsDataURL(blob); }; //使用方法,传入一个blob数据,在回调中接收处理成功的图片url blobToBase64(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中获取input(type="file")中的图片地址时,出现路径有误。调试发现获取的路径变为形如：C:\fakePath\*，从而出现错误。
初步解决办法：浏览器安全性设置；
操作：打开IE浏览器-->工具(Alt+x)-->Internet选项-->安全-->自定义级别-->“其他”中的“将本地文件上载至服务器时包含本地目录路径”设置为“启用”；
经测试以上解决办法可以解决上述问题，但要求每个用户在本地做这些操作显然并不合适，还可以通过对JS代码进行处理从而获得完整路径。
转载于:https://www.cnblogs.com/arthurW/p/7421627.html
在网上百度了很多方法，基本上在chome浏览器上获取绝对路径的方法都行不通，目前也没找到合适的通过路径解决问题的方法，后期会继续想办法的。
这里就写一下通过base64上传图片的方法，聊胜于无。函数：
function ii(obj) { //解决C:\fakepath问题-----base64 var piclen = (obj.files[0].size / 1024).toFixed(0); //判断图片大小 if (piclen > 25) { alert('你选择的文件大小超过25KB，请重新选择！'); return; } var oFReader = new FileReader(); var file = obj.files[0]; oFReader.readAsDataURL(file); oFReader.onloadend = function (oFRevent) { src = oFRevent.target.result; console.info("--->>" + src) }; //判断图片格式 var fileName = obj.value; var suffixIndex = fileName.lastIndexOf("."); var suffix = fileName.substring(suffixIndex + 1).toUpperCase(); if (suffix != "BMP" && suffix != "JPG" && suffix != "JPEG" && suffix != "PNG" && suffix != "GIF") { alert("请上传图片（格式BMP、JPG、JPEG、PNG、GIF等）!"); } }文本框
<label for="picture">图片：</label> <input id="picture" name="" type="file" class="dfinput" placeholder="请选择图片" onchange="ii(this);"/>@彭彭
写于2018年9月20日09:49:11
