评论

收藏

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

开发技术 开发技术 发布于:2021-11-08 15:55 | 阅读数:293 | 评论:0

今天小编就为大家分享一篇laravel框架上传图片实现实时预览功能,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
在laravel框架中上传图片并实时预览,其实并没有那么难,下面给大家展示一下;
HTML代码:
<img class="pic house-a" &omicron;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">
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;
}
效果图片:
DSC0000.jpg

以上这篇laravel框架上传图片实现实时预览功能就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持CodeAE代码之家
原文链接:https://blog.csdn.net/q459691431/article/details/74737593

关注下面的标签,发现更多相似文章