您现在的位置是:网站首页> 编程资料编程资料

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

2023-05-25 296人已围观

简介 laravel框架上传图片实现实时预览功能_php实例_

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

HTML代码:


controller代码:

 public function upload($photo) { $file_ex = $photo->getClientOriginalExtension(); if (!in_array($file_ex, array('jpg', 'gif', 'png', 'jpeg'))) { echo ""; } $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框架上传图片实现实时预览功能就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

-六神源码网