laravel5.2中点击用户头像更改头像

最新推荐文章于 2021-03-26 17:57:40 发布

angle_hearts

最新推荐文章于 2021-03-26 17:57:40 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/angle_hearts/article/details/59478805

版权

视图层

！！！自己下载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]);
    }
}

angle_hearts

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
laravel5.2中点击用户头像更改头像

视图层html>html>head lang="en"> meta charset="UTF-8"> title>title> style> style>head>script type="text/javascript"> //下面用于图片上传预览功能 function setImagePreview(avalue) {
复制链接

扫一扫