在laravel5.2中实现点击用户头像更改头像的方法
吾爱主题
阅读：125
2021-09-02 16:51:00
评论：0
视图层
！！！自己下载jquery文件和ajaxfileUpload的插件
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | <!DOCTYPE html> <html> <head lang= "en" > <meta charset= "UTF-8" > <title></title> <style> </style> </head> <script type= "text/javascript" > //下面用于图片上传预览功能 function setImagePreview(avalue) { var docObj=document.getElementById( "doc" ); var imgObjPreview=document.getElementById( "preview" ); if (docObj.files &&docObj.files[0]) { //火狐下，直接设img属性 imgObjPreview.style.display = 'block' ; //imgObjPreview.src = docObj.files[0].getAsDataURL(); //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式 imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]); } else { //IE下，使用滤镜 docObj.select(); var imgSrc = document.selection.createRange().text; var localImagId = document.getElementById( "localImag" ); //必须设置初始大小 localImagId.style.width = "150px" ; localImagId.style.height = "180px" ; //图片异常的捕捉，防止用户修改后缀来伪造图片 try { localImagId.style.filter= "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)" ; localImagId.filters.item( "DXImageTransform.Microsoft.AlphaImageLoader" ).src = imgSrc; } catch (e) { alert( "您上传的图片格式不正确，请重新选择!" ); return false ; } imgObjPreview.style.display = 'none' ; document.selection.empty(); } ajaxFileUpload(); //上传图片 return true ; } </script> <body> <center> <label> @foreach ($arr as $key=>$val) {{-- <img src= "{{$val->n_img}}" alt= "" height= "100" width= "100" class= "qq" > <input type= "file" id= "file1" style= "VISIBILITY: hidden" >--}} <img id= "preview" width= "100" height= "100" src= "{{$val->n_img}}" > <input type= "file" name= "touxiang" id= "doc" style= "display:none" οnchange= "javascript:setImagePreview();" > @endforeach </label> </center> </body> </html> <script src= "./js.js" ></script> <script src= "./ajaxfileupload.js" ></script> <script type= "text/javascript" > function ajaxFileUpload() { $.ajaxFileUpload ( { url: "{{url('up_img')}}" , //用于文件上传的服务器端请求地址 secureuri: false , //是否需要安全协议，一般设置为false fileElementId: 'doc' } ); return false ; } </script> |
控制器层
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Http\Requests; use DB; use Illuminate\Support\Facades\Input; class ImgController extends Controller { public function Index(){ $arr = DB::select( "SELECT * FROM r_nav limit 1" ); return view( 'index' ,[ 'arr' => $arr ]); } //修改图片 public function up_img(Request $Request ){ $n_file = Input::file( 'touxiang' ); if ( $n_file ->isValid()){ //获取文件名称 $clientName = $n_file -> getClientOriginalName(); $realPath = $n_file -> getRealPath(); //获取图片格式 $entension = $n_file -> getClientOriginalExtension(); //图片保存路径 $mimeTye = $n_file -> getMimeType(); $path = $n_file -> move( 'IMG' ); } $ress = DB::table( 'r_nav' )->where( 'n_id' ,11)->update([ 'n_img' => $path ]); } } |
以上这篇在laravel5.2中实现点击用户头像更改头像的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/angle_hearts/article/details/59478805
声明
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。
