document.write(''); document.write(''); document.write('

当前位置 主页 > 网站技术 > 代码类 >

    在laravel5.2中实现点击用户头像更改头像的方法

    栏目:代码类 时间:2019-11-09 09:02

    视图层

    !!!自己下载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"   >--}}
          <img  width="100" height="100" src="{{$val->n_img}}">
          <input type="file" name="touxiang"   ο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]);
      }
    }