laravel框架上传图片实现实时预览功能
时间:2022-07-27
本文章向大家介绍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框架上传图片实现实时预览功能就是小编分享给大家的全部内容了,希望能给大家一个参考。
- [大数据之Spark]——Transformations转换入门经典实例
- 字符串的排列
- 斐波那契额数列及青蛙跳台阶问题
- 在Mac OS X上配置Apache2
- 合并两个排序的链表
- 还有5天,你的比特币最重要的孩子UB-UBTC 可能就永远不属于你了
- Spark SQL 用户自定义函数UDF、用户自定义聚合函数UDAF 教程(Java踩坑教学版)
- Webpack多入口文件、热更新等体验
- 从hello world 解析程序运行机制
- 万达大量员工“被”辞职?曲德君回应:万达网科没有倒
- iOS Programming – 触摸事件处理(2)
- 洋葱海外仓融资2亿元 官网启用msyc.cc域名
- Webpack单元测试,e2e测试
- [看图说话] 基于Spark UI性能优化与调试——初级篇
- php概述
- php教程
- php环境搭建
- PHP书写格式
- php变量
- php常量
- PHP注释
- php数组
- php字符串 string
- PHP整型 integer
- PHP浮点型 float
- php布尔型
- php数据类型之数组
- php数据类型之对象
- php数据类型之null
- php数据类型之间的转换
- php运算符
- php表达式
- PHP循环控制
- PHP流程控制
- php函数
- php全局变量
- PHP魔术变量
- php命名空间
- php 日期
- PHP包含文件
- php文件
- PHP 文件上传
- php Cookies
- php Sessions
- php email
- php安全email
- php错误处理
- PHP异常处理
- php过滤器
- PHP 高级过滤器
- php json
- php 表单
- PHP MySQL 简介
- PHP 连接 MySQL
- php创建数据库
- php 创建表
- php mysq 插入数据
- PHP MySQL 插入多条数据
- PHP MySQL 预处理语句
- php mysql 读取数据
- php mysql where
- PHP MySQL Order By
- PHP MySQL Update
- PHP MySQL Delete
- php ODBC
- Jenkins打造多分支流水线指南
- Spring中的设计模式
- java单元/集成测试中使用Testcontainers
- AOP编程简介及其在Spring框架中的使用
- 使用Maven Archetype创建Java项目模板
- left join左表一定是驱动表吗?
- OneFlow快速上手教程
- [译]HAL-超文本应用语言
- OneFlow | 新深度学习框架后浪(附源代码)
- 居民身份证阅读器产品开发学习心得(再谈标准-软件-协议)
- Spring Data REST不完全指南(一)
- Cocos2d-js中的简易MVC框架(五)MVC框架的使用
- [译]谈谈SpringBoot 事件机制
- C++ 模板沉思录(下)
- Cocos2d-js中的简易MVC框架(四)显示层View