主页 > 知识库 > laravel框架上传图片实现实时预览功能

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

热门标签:服务器配置 科大讯飞语音识别系统 团购网站 Linux服务器 电子围栏 Mysql连接数设置 银行业务 阿里云

在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框架上传图片实现实时预览功能》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266