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

(0)

相关推荐

  • 使用Laravel中的查询构造器实现增删改查功能

    引言 上一篇介绍了如何在windows环境下跑一个 laravel 项目,这一篇写如何使用 laravel 中的 查询构造器 实现增删改查. 读这篇文章时我默认你已拥有如下知识: 了解php的基础语法 了解数据库设计 了解常用的sql查询 正文 实现增删改查前, 我们先准备一些步骤: php, nginx, mysql 服务正确启用 新建一个数据库及其数据表 开启服务我们打开上篇文章介绍的 Wnmp.exe -> Start all 然后cmd上键入命令: D:/wnmp/Wnmp/php/ph

  • laravel框架关于搜索功能的实现

    这里的搜索功能主要基于表单get提交实现的 <form action="/backend/auditList" method="get"> <table class="search_tab"> <tr> <th width="120">选择分类:</th> <td> <select name="class" > <op

  • jQuery实现checkbox即点即改批量删除及中间遇到的坑

    最近要用jQuery实现一个批量删除操作,效果如下图 最终页面page.html,此页面使用了bootstrap和jQuery,如果没有需要下载一下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>视频管理</title> <link rel="stylesheet" type="text/css"

  • JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享

    效果展示: 代码实现: 控制器 <?php namespace app\controllers; use Yii; use yii\filters\AccessControl; use yii\web\Controller; use yii\filters\VerbFilter; use app\models\LoginForm; use app\models\ContactForm; //use yii\db\ActiveRecord; use yii\data\Pagination; use

  • tp5修改(实现即点即改)

    效果如下所示: 点击修改时把想修改的变成input框 实现代码如下:根据自己实际情况修改即可. <script type="text/javascript"> $(document).on('click','.xiu',function(){ old_val=$(this).html(); // $(this).parent().html("<input type=\'text\' value="+old_val+" class='inp

  • Laravel+Layer实现图片上传功能(整理篇)

    ♩ 背景 昨天在自己的 Laravel5.5 框架项目中,希望集成 Layer 的图片上传功能 但是在 ajax(POST) 提交请求时,一直显示 500 报错 ♪ 分析 ⒈ 问题所在 最后将核心代码摘出,放到 Larvel 框架以外运行,发现代码是没有问题的,因为对 Laravel 框架接触的太浅,忽视了 CSRF 的限制 ⒉ 解决方案 一般在表单提交时,都会存放一个隐藏的输入框 <input type="hidden" name="_token" valu

  • Laravel框架实现发送短信验证功能代码

    Laravel框架简介: Laravel是一套简洁.优雅的PHP Web开发框架(PHP Web Framework).它可以让你从面条一样杂乱的代码中解脱出来:它可以帮你构建一个完美的网络APP,而且每行代码都可以简洁.富于表达力. Laravel短信验证思路详解 今天在做到用户注册和个人中心的安全管理时,我实现借助第三方短信平台在Laravel框架中进行手机验证的设置; 由于我做的是一个为客户提供医疗咨询和保健品网站,所以我们对客户个人隐私的保护显得尤为重要,因而在客户登录后进入个人中心前,

  • Laravel框架实现即点即改功能的方法分析

    本文实例讲述了Laravel框架实现即点即改功能的方法.分享给大家供大家参考,具体如下: 有的时候我们不需要更改大量数据,只需要更改一个字段的时候,我们就用到了即点即改,以用户模块,修改用户名称为例,下图为我的展示模块 当我们点击用户名时,会出现一个修改框,那么这个修改框是怎么来的呢? 我们点击时,隐藏在这个td当中的修改框会出现,而展示时的用户名会隐藏起来,我们怎么利用代码实现? <td onclick="saveuser({{$v->id}})"> <spa

  • laravel5.5添加echarts实现画图功能的方法

    一.下载echarts 我用的是3.X版本,下载地址 二.在页面中引入echarts <script type="text/javascript" src="/js/echarts.min.js"></script> 我把下载下来的echarts.min.js放在了public/js/目录下 三.通过post的请求获取数据并在页面展示 1.添加路由 Route::get('/test2', 'CunliangController@test2'

  • PHP+jQuery实现即点即改功能示例

    本文实例讲述了PHP+jQuery实现即点即改功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>即点即改</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&quo

  • Laravel 6 将新增为指定队列任务设置中间件的功能

    Taylor Otwell 在 Laravel 6 中新增了为指定队列任务设置中间件的能力,以便我们在执行某些队列任务之前先执行一些业务逻辑: This [pull request] adds an easy way to have job specific middleware for queued jobs. Global job middleware were actually already possible by calling Bus::pipeThrough([]) in a se

随机推荐