在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 相关文章推荐
第六节 访问属性和方法 [6]
Oct 09 PHP
PHP新手上路(八)
Oct 09 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
Nov 10 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
Nov 25 PHP
php使用Smarty的相关注意事项及访问变量的几种方式
Dec 08 PHP
PHP中3种生成XML文件方法的速度效率比较
Oct 06 PHP
PHP操作MySQL事务实例
Nov 05 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
Jan 25 PHP
php生成图片缩略图功能示例
Feb 22 PHP
浅谈PHP中如何实现Hook机制
Nov 14 PHP
PHP通过curl获取接口URL的数据方法
May 31 PHP
PHP chunk_split()函数讲解
Feb 12 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
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
jQuery EasyUI 中文API Layout(Tabs)
2010/04/27 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
理解javascript async的用法
2017/08/22 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python中迭代器(iterator)用法实例分析
2015/04/29 Python
python编程实现归并排序
2017/04/14 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
Python读写文件基础知识点
2019/06/10 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
两道JAVA笔试题
2016/09/14 面试题
金融学专业大学生职业生涯规划
2014/03/07 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
巴西世界杯32强口号
2014/06/05 职场文书
主题党日活动总结
2014/07/08 职场文书
《山中访友》教学反思
2016/02/24 职场文书
用JS写一个发布订阅模式
2021/11/07 Javascript