在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 相关文章推荐
wordpress之wp-settings.php
Aug 17 PHP
php xml-rpc远程调用
Dec 19 PHP
解析CI即CodeIgniter框架在Nginx下的重写规则
Jun 03 PHP
PHP实现克鲁斯卡尔算法实例解析
Aug 22 PHP
php去掉文件前几行的方法
Jul 29 PHP
php实现复制移动文件的方法
Jul 29 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
Jul 14 PHP
PHP中session跨子域的三种实现方法
Jul 25 PHP
php实现给二维数组中所有一维数组添加值的方法
Feb 04 PHP
yii2学习教程之5种内置行为类详解
Aug 03 PHP
简单实现php上传文件功能
Sep 21 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
Oct 13 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
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
Javascript 写的简单进度条控件
2008/01/22 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
解决python写的windows服务不能启动的问题
2014/04/15 Python
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
python中def是做什么的
2020/06/10 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
Html5之title吸顶功能
2018/06/04 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
英语自荐信范文
2013/12/11 职场文书
土建资料员岗位职责
2014/01/04 职场文书
社区八一活动方案
2014/02/03 职场文书
考试保密承诺书
2014/08/30 职场文书
出差报告格式模板
2014/11/06 职场文书
婚内分居协议书范文
2014/11/26 职场文书
小学班主任评语
2014/12/29 职场文书
欢迎词怎么写
2015/01/23 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
基层党建工作简报
2015/07/21 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
CSS 伪元素::marker详解
2021/06/26 HTML / CSS