모바일에서 첨부파일 업로드 오류
본문
안녕하세요!
모바일 브라우저에서 이미지 첨부를 할 때, 파일 선택이 아닌 사진 촬영을 하여 게시물을 업로드하는 경우 '올바른 방법으로 이용해 주십시오.' 라는 경고창이 노출되며 업로드 완료가 되지 않는 상황입니다.
input 태그에 accept="image/*" 속성을 추가하였지만 안드로이드의 크롬 브라우저에서만 촬영 기능이 비활성화 될 뿐, 네이버앱이나 사파리에선 촬영 기능이 여전히 동작하고 있어 원천적으로 막기가 불가능한 상태입니다.
혹시 비슷한 문제를 해결하신 분이 있으시다면 조언 부탁드리겠습니다.
답변 1
프론트엔드
<input type="file" id="imageUpload" accept="image/*" onchange="validateFileType(this);" />
<script>
function validateFileType(input) {
const file = input.files[0];
const acceptedImageTypes = /image\/(jpeg|jpg|png|gif)/;
if (file && !acceptedImageTypes.test(file.type)) {
alert('올바른 이미지 파일을 선택해 주세요.');
input.value = '';
}
}
</script>
백엔드
if ($_FILES['image']['error'] == UPLOAD_ERR_OK) {
$fileType = mime_content_type($_FILES['image']['tmp_name']);
$acceptedTypes = ['image/jpeg', 'image/png', 'image/gif'];
if (!in_array($fileType, $acceptedTypes)) {
die('파일 형식 오류.');
}
// 파일 업로드 처리...
}
답변을 작성하시기 전에 로그인 해주세요.
