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


Posted in PHP onOctober 14, 2019

在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框架上传图片实现实时预览功能就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
DISCUZ 分页代码
Jan 02 PHP
php mysql索引问题
Jun 07 PHP
mysql5的sql文件导入到mysql4的方法
Oct 19 PHP
php strcmp使用说明
Apr 22 PHP
PHP 一个随机字符串生成代码
May 26 PHP
发款php蜘蛛统计插件只要有mysql就可用
Oct 12 PHP
php实现的发送带附件邮件类实例
Sep 22 PHP
PHP遍历文件夹与文件类及处理类用法实例
Sep 23 PHP
PHP速成大法
Jan 30 PHP
CodeIgniter扩展核心类实例详解
Jan 20 PHP
thinkphp框架类库扩展操作示例
Nov 26 PHP
php使用fputcsv实现大数据的导出操作详解
Feb 27 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
Oct 14 #PHP
yii框架数据库关联查询操作示例
Oct 14 #PHP
laravel实现上传图片并在页面显示的例子
Oct 14 #PHP
Thinkphp5.0 框架的请求方式与响应方式分析
Oct 14 #PHP
laravel 多图上传及图片的存储例子
Oct 14 #PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
Oct 13 #PHP
Laravel开启跨域请求的方法
Oct 13 #PHP
You might like
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
php之Memcache学习笔记
2013/06/17 PHP
php动态生成函数示例
2014/03/21 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
Python简单日志处理类分享
2015/02/14 Python
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
python的re模块使用方法详解
2019/07/26 Python
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
小学生家长寄语
2014/04/02 职场文书
医药营销个人求职信
2014/04/12 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
MySQL事务的隔离级别详情
2022/07/15 MySQL
Java Redisson多策略注解限流
2022/09/23 Java/Android