利用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" >

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框架項目實現一個實時預覽功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。