婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

主頁 > 知識庫 > laravel框架上傳圖片實現實時預覽功能

laravel框架上傳圖片實現實時預覽功能

熱門標簽:福泉電話機器人 南寧crm外呼系統平臺 太原極信防封電銷卡 事業單位如何百度地圖標注 格陵蘭島地圖標注 地圖標注入哪個科目 電銷招聘機器人 熱線電話機器人 天津營銷電話機器人加盟代理

在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框架 laravel-admin上傳圖片到oss的方法
  • Laravel框架實現文件上傳的方法分析
  • Laravel框架實現的上傳圖片到七牛功能詳解
  • Laravel框架文件上傳功能實現方法示例
  • Laravel框架+Blob實現的多圖上傳功能示例
  • Laravel框架實現點播上傳阿里云功能

標簽:香港 寶雞 通化 阿克蘇 金華 郴州 自貢 佳木斯

巨人網絡通訊聲明:本文標題《laravel框架上傳圖片實現實時預覽功能》,本文關鍵詞  laravel,框架,上傳,圖片,實現,;如發現本文內容存在版權問題,煩請提供相關信息告之我們,我們將及時溝通與處理。本站內容系統采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《laravel框架上傳圖片實現實時預覽功能》相關的同類信息!
  • 本頁收集關于laravel框架上傳圖片實現實時預覽功能的相關信息資訊供網民參考!
  • 推薦文章
    主站蜘蛛池模板: 鸡东县| 华安县| 红安县| 蓬莱市| 齐河县| 丹凤县| 龙山县| 荣昌县| 榆林市| 贵南县| 石阡县| 邹城市| 揭东县| 全州县| 财经| 泾阳县| 福鼎市| 昌都县| 龙门县| 蓬溪县| 苗栗市| 维西| 郓城县| 深水埗区| 金昌市| 且末县| 定边县| 祥云县| 万山特区| 盈江县| 庆元县| 双城市| 子洲县| 衡南县| 台东县| 泗阳县| 枝江市| 绥德县| 河间市| 玉山县| 隆昌县|