经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » PHP » 查看文章
在laravel5.2中实现点击用户头像更改头像的方法
来源:jb51  时间:2019/10/14 10:09:30  对本文有异议

视图层

!!!自己下载jquery文件和ajaxfileUpload的插件

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style>
  7. </style>
  8. </head>
  9. <script type="text/javascript">
  10. //下面用于图片上传预览功能
  11. function setImagePreview(avalue) {
  12.  
  13.  
  14.  
  15. var docObj=document.getElementById("doc");
  16.  
  17. var imgObjPreview=document.getElementById("preview");
  18. if(docObj.files &&docObj.files[0])
  19. {
  20. //火狐下,直接设img属性
  21. imgObjPreview.style.display = 'block';
  22. //imgObjPreview.src = docObj.files[0].getAsDataURL();
  23.  
  24. //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
  25. imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
  26. }
  27. else
  28. {
  29. //IE下,使用滤镜
  30. docObj.select();
  31. var imgSrc = document.selection.createRange().text;
  32. var localImagId = document.getElementById("localImag");
  33. //必须设置初始大小
  34. localImagId.style.width = "150px";
  35. localImagId.style.height = "180px";
  36. //图片异常的捕捉,防止用户修改后缀来伪造图片
  37. try{
  38. localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
  39. localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
  40.  
  41. }
  42. catch(e)
  43. {
  44. alert("您上传的图片格式不正确,请重新选择!");
  45. return false;
  46. }
  47. imgObjPreview.style.display = 'none';
  48. document.selection.empty();
  49. }
  50. ajaxFileUpload(); //上传图片
  51. return true;
  52.  
  53. }
  54.  
  55. </script>
  56. <body>
  57. <center>
  58. <label>
  59. @foreach ($arr as $key=>$val)
  60. {{-- <img src="{{$val->n_img}}" alt="" height="100" width="100" class="qq">
  61. <input type="file" id="file1" style="VISIBILITY: hidden" >--}}
  62. <img id="preview" width="100" height="100" src="{{$val->n_img}}">
  63. <input type="file" name="touxiang" id="doc" style="display:none" οnchange="javascript:setImagePreview();">
  64. @endforeach
  65. </label>
  66. </center>
  67. </body>
  68. </html>
  69. <script src="./js.js"></script>
  70. <script src="./ajaxfileupload.js"></script>
  71.  
  72. <script type="text/javascript">
  73.  
  74.  
  75.  
  76. function ajaxFileUpload() {
  77.  
  78.  
  79. $.ajaxFileUpload
  80. (
  81. {
  82. url: "{{url('up_img')}}", //用于文件上传的服务器端请求地址
  83. secureuri: false, //是否需要安全协议,一般设置为false
  84. fileElementId: 'doc'
  85. }
  86. );
  87. return false;
  88. }
  89. </script>

控制器层

  1. <?php
  2.  
  3. namespace App\Http\Controllers;
  4.  
  5. use Illuminate\Http\Request;
  6.  
  7. use App\Http\Requests;
  8.  
  9. use DB;
  10. use Illuminate\Support\Facades\Input;
  11. class ImgController extends Controller
  12. {
  13. public function Index(){
  14. $arr= DB::select("SELECT * FROM r_nav limit 1");
  15. return view('index',['arr'=>$arr]);
  16. }
  17. //修改图片
  18. public function up_img(Request $Request){
  19. $n_file = Input::file('touxiang');
  20. if($n_file->isValid()){
  21. //获取文件名称
  22. $clientName = $n_file -> getClientOriginalName();
  23. $realPath = $n_file -> getRealPath();
  24. //获取图片格式
  25. $entension = $n_file -> getClientOriginalExtension();
  26. //图片保存路径
  27. $mimeTye = $n_file -> getMimeType();
  28. $path = $n_file -> move('IMG');
  29. }
  30. $ress = DB::table('r_nav')->where('n_id',11)->update(['n_img'=>$path]);
  31. }
  32. }

以上这篇在laravel5.2中实现点击用户头像更改头像的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号