728x90
뭔가 사진을 넣으면 기본적으로 프리뷰가 보이도록 많이들 요청한다.
요샌 프로필사진이 기본인데 내가 잘못올렸는지 한번 확인도 할 수 있으면 좋으니..
좋은게 좋은거지
<html>
<body>
<img src="" id="preview" class="" width="200px" hright="200px" />
<div class="">
<input type="file" id="files" name="files" accept="image/*" class="file imgfile" title="첨부파일" onchange="prevURL(this);">프로필 사진 업로드</label></button>
</div>
</body>
</html>기본 html이고 코드도 아주 간단하니 편하게 사용이 가능하다.
function prevURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
var imgurl = e.target.result;
$('#preview').attr('src',imgurl);
};
reader.readAsDataURL(input.files[0]);
}
}input으로 file을 받아와서 해당파일의 임시 url을 이용해 화면을 넣어준다. 물론 들어가고나서 받아오는 내용은 스스로들 설정할거니 상관없는부분... 그냥 휘발성 img 태그를 사용해 화면에만 보여주도록 하면된다.
프리뷰 이미지는 간단하면서도 뭔가 이해하기가 난해했는데 막상 해보니 아주 간단한 내용이라 신기했었다...
728x90
'개인 공부' 카테고리의 다른 글
| [PHP] 10분후 자동 로그아웃 (0) | 2023.01.12 |
|---|---|
| [SQL,PHP] 웹 해킹 자동화공격 막기 (0) | 2023.01.12 |
| [php] 사이 날짜 구하기 (시작날짜 ~ 끝 날짜) (0) | 2022.12.07 |
| JQuert 사용 (0) | 2022.12.05 |
| [php] 기본적인 함수 사용(strlen, number_fomat,substr) (0) | 2022.11.30 |
