• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    laravel框架上传图片实现实时预览功能

    在laravel框架中上传图片并实时预览,其实并没有那么难,下面给大家展示一下;

    HTML代码:

    img class="pic house-a" οnclick="houseImgOne(this)" name="house_img_one" id="house_img_one" src="">
    input type="file" name="house_img_one" id="house_img_one1" multiple="multiple" style="display:none;">


    controller代码:

     public function upload($photo)
      {
        $file_ex = $photo->getClientOriginalExtension();
        if (!in_array($file_ex, array('jpg', 'gif', 'png', 'jpeg'))) {
          echo "script>alert('文件格式错误,仅支持 jpg ,gif,png,jpeg');location.href='/apply'/script>";
        }
        $newname = date('Ymdhis') . rand(1, 999) . "." . $file_ex;
        $savepath = config('constants.img_uf') .'Uploads/Apply/';
        $path = $photo->move($savepath, $newname);
        $filepath = "UF/Uploads/Apply/" . $newname;
        return $filepath;
      }

    这里是把上传,封装成了一个方法,添加的时候直接添加最后的路径就可以了;

    js代码:

    var _btnId = '';
    function houseImgOne(_this){
      _btnId = $(_this).attr('id');
      $('#house_img_one1').click();
      $("#house_img_one1").change(function () {
        var objUrl = getObjectURL(this.files[0]); //获取图片的路径,该路径不是图片在本地的路径
        if (objUrl) {
          $("#" + _btnId).attr("src", objUrl); //将图片路径存入src中,显示出图片ai
        }
      });
    }
    /建立一个可存取到该file的url
    function getObjectURL(file) {
      var url = null;
      if (window.createObjectURL != undefined) { 
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) { 
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) { 
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    }

    效果图片:

    以上这篇laravel框架上传图片实现实时预览功能就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    您可能感兴趣的文章:
    • laravel框架 laravel-admin上传图片到oss的方法
    • Laravel框架实现文件上传的方法分析
    • Laravel框架实现的上传图片到七牛功能详解
    • Laravel框架文件上传功能实现方法示例
    • Laravel框架+Blob实现的多图上传功能示例
    • Laravel框架实现点播上传阿里云功能
    上一篇:解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
    下一篇:Yii框架数据库查询、增加、删除操作示例
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    laravel框架上传图片实现实时预览功能 laravel,框架,上传,图片,实现,