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 프레임 워 크 에 사진 을 올 려 실시 간 미리 보기 기능 을 실현 하 는 것 이 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 실 수 있 고 많은 응원 부 탁 드 리 겠 습 니 다.