您现在的位置是:网站首页> 编程资料编程资料
laravel框架上传图片实现实时预览功能_php实例_
2023-05-25
297人已围观
简介 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框架上传图片实现实时预览功能就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- 解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题_php实例_
- yii框架数据库关联查询操作示例_php实例_
- laravel实现上传图片并在页面显示的例子_php实例_
- Thinkphp5.0 框架的请求方式与响应方式分析_php实例_
- laravel 多图上传及图片的存储例子_php实例_
- Laravel 5.4前后台分离,通过不同的二级域名访问方法_php实例_
- Laravel开启跨域请求的方法_php实例_
- 浅谈Laravel中的三种中间件的作用_php实例_
- laravel config文件配置全局变量的例子_php实例_
- Laravel 读取 config 下的数据方法_php实例_
