在laravel5.2中实现点击用户头像更改头像的方法


Posted in PHP onOctober 14, 2019

视图层

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

<!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>

控制器层

<?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中实现点击用户头像更改头像的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
如何去掉文章里的 html 语法
Oct 09 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
Dec 03 PHP
PHP独立Session数据库存储操作类分享
Jun 11 PHP
PHP编译安装中遇到的两个错误和解决方法
Aug 20 PHP
从零开始学YII2框架(六)高级应用程序模板
Aug 20 PHP
Yii使用技巧大汇总
Dec 29 PHP
PHP简单预防sql注入的方法
Sep 27 PHP
老生常谈PHP面向对象之注册表模式
May 26 PHP
详解PHP神奇又有用的Trait
Mar 25 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
Aug 03 PHP
laravel 实现登陆后返回登陆前的页面方法
Oct 03 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
Apr 04 PHP
Yii框架数据库查询、增加、删除操作示例
Oct 14 #PHP
laravel框架上传图片实现实时预览功能
Oct 14 #PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
Oct 14 #PHP
yii框架数据库关联查询操作示例
Oct 14 #PHP
laravel实现上传图片并在页面显示的例子
Oct 14 #PHP
Thinkphp5.0 框架的请求方式与响应方式分析
Oct 14 #PHP
laravel 多图上传及图片的存储例子
Oct 14 #PHP
You might like
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
golang与PHP输出excel示例
2016/07/22 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
Python编程中归并排序算法的实现步骤详解
2016/05/04 Python
Django 使用logging打印日志的实例
2018/04/28 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
Django框架视图介绍与使用详解
2019/07/18 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
运动会领导邀请函
2014/01/10 职场文书
离婚协议书标准格式
2014/10/04 职场文书
抗洪救灾标语
2014/10/08 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
初中教师个人总结
2015/02/10 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
毕业证明书
2015/06/19 职场文书
总结会主持词
2015/07/02 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
nginx中proxy_pass各种用法详解
2021/11/07 Servers