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 相关文章推荐
实用函数7
Nov 08 PHP
PHP 地址栏信息的获取代码
Jan 07 PHP
php接口与接口引用的深入解析
Aug 09 PHP
重新认识php array_merge函数
Aug 31 PHP
php页面缓存方法小结
Jan 10 PHP
PHP导出Excel实例讲解
Jan 24 PHP
php redis实现文章发布系统(用户投票系统)
Mar 04 PHP
PHP手机号中间四位用星号*代替显示的实例
Jun 02 PHP
PHP基于socket实现客户端和服务端通讯功能
Jul 13 PHP
thinkphp分页集成实例
Jul 24 PHP
php图片合成方法(多张图片合成一张)
Nov 25 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
Sep 10 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
PHP 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
php 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
php中的常用魔术方法总结
2013/08/02 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
初探jquery——表单应用范例
2007/02/20 Javascript
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
Python 字符串换行的多种方式
2018/09/06 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
电气技术员岗位职责
2013/11/19 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
小学六年级学生评语
2014/04/22 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
python百行代码实现汉服圈图片爬取
2021/11/23 Python