在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编写大型网站问题集
Mar 06 PHP
用PHP连接MySQL代码的参数说明
Jun 07 PHP
PHP编程最快明白(第一讲 软件环境和准备工作)
Oct 25 PHP
有关php运算符的知识大全
Nov 03 PHP
php的POSIX 函数以及进程测试的深入分析
Jun 03 PHP
cakephp打印sql语句的方法
Feb 13 PHP
php控制文件下载速度的方法
Mar 24 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
Mar 07 PHP
PHP读书笔记_运算符详解
Jul 01 PHP
php使用curl详细解析及问题汇总
Aug 11 PHP
PHP实现的简单在线计算器功能示例
Aug 02 PHP
php实例化一个类的具体方法
Sep 19 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设计模式小结
2013/02/15 PHP
php使用codebase生成随机数
2014/03/25 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
IE和Firefox下event事件杂谈
2009/12/18 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
Python获取任意xml节点值的方法
2015/05/05 Python
详细讲解Python中的文件I/O操作
2015/05/24 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
python 获取等间隔的数组实例
2019/07/04 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
光声世纪笔试题目
2012/08/25 面试题
垃圾回收的优点和原理
2014/05/16 面试题
优秀教师先进材料
2014/12/16 职场文书
2016年春节慰问信息
2015/03/25 职场文书
我的中国梦主题班会
2015/08/14 职场文书
2016年村党支部公开承诺书
2016/03/24 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android