在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 相关文章推荐
php下载远程文件类(支持断点续传)
Nov 14 PHP
PHP 配置文件中open_basedir选项作用
Jul 19 PHP
PHP添加Xdebug扩展的方法
Feb 12 PHP
PHP常用函数和常见疑难问题解答
Mar 05 PHP
php+mysql实现无限分类实例详解
Jan 15 PHP
PHP计算指定日期所在周的开始和结束日期的方法
Mar 24 PHP
php遍历类中包含的所有元素的方法
May 12 PHP
PHP图像处理类库及演示分享
May 17 PHP
php实现留言板功能(会话控制)
May 23 PHP
Laravel下生成验证码的类
Nov 15 PHP
浅谈PHP中的Trait使用方法
Mar 22 PHP
用php定义一个数组最简单的方法
Oct 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
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
供参考的 php 学习提高路线分享
2011/10/23 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
犀利的js 函数集合
2009/06/11 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
python内置模块collections知识点总结
2019/12/19 Python
python爬虫容易学吗
2020/06/02 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
世界上最大的二手相机店:KEN
2017/05/17 全球购物
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
一份报关员的职业规划范文
2014/01/08 职场文书
给老师的道歉信
2014/01/11 职场文书
合作协议书怎么写
2014/04/18 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python