laravel框架上傳圖片實現(xiàn)實時預覽功能

更新時間：2019年10月14日 09:33:22 作者：QDX_1209_BJ

今天小編就為大家分享一篇laravel框架上傳圖片實現(xiàn)實時預覽功能，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

在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框架上傳圖片實現(xiàn)實時預覽功能就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

利用php的ob緩存機制實現(xiàn)頁面靜態(tài)化方法
下面小編就為大家?guī)硪黄胮hp的ob緩存機制實現(xiàn)頁面靜態(tài)化方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
淺談PHP值mysql操作類
下面小編就為大家?guī)硪黄獪\談PHP值mysql操作類。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
PHP獲取網(wǎng)頁標題的3種實現(xiàn)方法代碼實例
這篇文章主要介紹了PHP獲取網(wǎng)頁標題的3種實現(xiàn)方法,分別使用CURL、file()函數(shù)、file_get_contents實現(xiàn),需要的朋友可以參考下
2014-04-04
在PHP中操作文件的擴展屬性
PHP為我們提供了一個擴展可以用于對文件的擴展屬性進行操作。本文通過實例代碼給大家介紹在PHP中操作文件的擴展屬性的相關知識，感興趣的朋友跟隨小編一起看看吧
2021-07-07
PHP Error與Logging函數(shù)的深入理解
本篇文章是對PHP中的Error函數(shù)與Logging函數(shù)進行了詳細的分析介紹，需要的朋友參考下
2013-06-06
詳解WordPress中提醒安裝插件以及隱藏插件的功能實現(xiàn)
這篇文章主要介紹了WordPress中提醒安裝插件以及隱藏插件的功能實現(xiàn),這兩種功能通常在多用戶模式下進行管理時用得比較多,需要的朋友可以參考下
2015-12-12
創(chuàng)建配置文件用PHP寫出自己的BLOG系統(tǒng) 2
今天做博客安裝程序，首先做的是配置文件的創(chuàng)建。
2010-04-04
php版微信公眾賬號第三方管理工具開發(fā)簡明教程
這篇文章主要介紹了php版微信公眾賬號第三方管理工具開發(fā)方法,結(jié)合實例形式分析了php基于curl參數(shù)傳遞實現(xiàn)第三方管理功能的相關操作技巧與注意事項,需要的朋友可以參考下
2016-09-09
laravel批量生成假數(shù)據(jù)的方法
今天小編就為大家分享一篇laravel批量生成假數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
php單文件版在線代碼編輯器
這篇文章主要介紹了php單文件版在線代碼編輯器,個人感覺相當不錯，分享給大家，需要的朋友可以參考下
2015-03-03