✔ fakepath 삭제하기

앞선 포스팅에서 input[type=file]을 커스터마이징 해봤다!

꽤나 마음에 드는 모습의 파일 버튼이 완성됐는데 거기서 생긴 한 가지 커다란 문제점...

인풋 박스에 업로드한 파일명을 뿌리면

업로드 경로까지 출력하는데 보안상의 문제로 실제 경로가 아닌 fakepath가 출력된다는 것,,,

거슬리는 게 없으면 그대로 써도 되겠지만 일반적인 웹 페이지에서는 저런 거 없으니까 나도 없애고 싶었음

찾아봤는데 생각보다 복잡하길래 그냥 포기하려고 했다가

시간이 좀 남아서 다시 도전했는데 생각보다 쉽게 해결됐음!

코드 한 줄 추가하니까 사라졌다ㅎㅎㅎ

기존에 사용했던 제이쿼리는 아래와 같다

$("#img").on('change',function(){
  var fileName = $("#img").val();
  $("#img_name").val(fileName);
});

아래와 같이 바꿔주면 해결됨!

두 번째 줄에 코드가 조금 추가됐을 뿐인데 바로 해결됐음ㅎㅎㅎ

$("#img").on('change',function(){
  var fileName = $("#img").val().split('/').pop().split('\\').pop();
  $("#img_name").val(fileName);
});

이제 경로없이 파일명만 잘 뜬다!ㅎㅎㅎ

---

여기 참고했습니다!