확장자로 선택 가능한 파일 제한

확장자로 선택 가능한 파일 제한

---

이 질문에 이미 답변이 있습니다.

• <input type =“file”>을 사용할 때 파일 형식을 제한 하시겠습니까? 9 답변

어떻게 누군가가 input type = "file"요소로 선택 될 수있는 파일을 확장자로 제한 할 수 있습니까?

나는 이미 accept 속성을 알고 있지만 크롬에서는 정의 된 마지막 MIME 유형 (이 경우 "gif")으로 파일을 제한하고 FF4는 아무 것도 제한하지 않습니다.

<input type="file" accept="image/jpg, image/gif">

내가 뭘 잘못하고 있니? 아니면 다른 방법이 있습니까?

조언을 구하십시오 ...

---

솔직히 파일을 제한하는 가장 좋은 방법은 서버 측입니다. 사람들은 클라이언트에서 파일 형식을 스푸핑 할 수 있으므로 서버 전송시 전체 파일 이름을 가져 와서 파일 형식을 구문 분석 한 다음 메시지를 반환하는 것이 일반적으로 가장 좋은 방법입니다.

---

쉬운 방법은 다음과 같습니다.

<input type="file" accept=".gif,.jpg,.jpeg,.png,.doc,.docx">

IE9를 제외한 모든 브라우저에서 작동합니다. IE10 +에서 테스트하지 않았습니다.

---

참고 :이 답변은 2011 년의 답변입니다. 그 당시에는 정말 좋은 답변 이었지만 2015 년 현재 네이티브 HTML 속성은 대부분의 브라우저에서 지원되므로 (보통) JS에서 이러한 사용자 지정 논리를 구현할 필요가 없습니다. Edi의 답변 과 문서를 참조하십시오 .

---

파일을 업로드하기 전에 Javascript를 사용하여 파일 확장자를 확인하고 일치하지 않는 경우 양식 제출을 방지 할 수 있습니다. 업로드 할 파일의 이름은 양식 요소의 "값"필드에 저장됩니다.

다음은 ".gif"로 끝나는 파일 만 업로드 할 수있는 간단한 예입니다.

<script type="text/javascript">
    function checkFile() {
        var fileElement = document.getElementById("uploadFile");
        var fileExtension = "";
        if (fileElement.value.lastIndexOf(".") > 0) {
            fileExtension = fileElement.value.substring(fileElement.value.lastIndexOf(".") + 1, fileElement.value.length);
        }
        if (fileExtension.toLowerCase() == "gif") {
            return true;
        }
        else {
            alert("You must select a GIF file for upload");
            return false;
        }
    }
</script>

<form action="upload.aspx" enctype="multipart/form-data" onsubmit="return checkFile();">
    <input name="uploadFile" id="uploadFile" type="file" />

    <input type="submit" />
</form>

그러나이 방법은 완벽하지 않습니다. Sean Haddy는 사용자가 자바 스크립트를 끄거나 브라우저에 도착한 후 코드를 편집하여 자바 스크립트 검사를 무력화 할 수 있기 때문에 항상 서버 측에서 확인하고 싶은 것이 맞습니다. 클라이언트 측 확인 외에도 서버 측을 확실히 확인하십시오. 또한 사용자가 2GB 파일로 서버를 충돌시키지 않도록 서버 측 크기도 확인하는 것이 좋습니다 (플래시 나 Java 애플릿 등을 사용하지 않고 클라이언트 측에서 파일 크기를 확인할 수있는 방법은 없습니다). ).

그러나 여기에 제공된 방법을 사용하여 클라이언트 측을 미리 확인하는 것은 여전히 ​​유용합니다. 왜냐하면 실수를 방지 할 수 있고 심각하지 않은 장난에 대한 사소한 억제이기 때문입니다.

---

 function uploadFile() {
     var fileElement = document.getElementById("fileToUpload");
        var fileExtension = "";
        if (fileElement.value.lastIndexOf(".") > 0) {
            fileExtension = fileElement.value.substring(fileElement.value.lastIndexOf(".") + 1, fileElement.value.length);
        }
        if (fileExtension == "odx-d"||fileExtension == "odx"||fileExtension == "pdx"||fileExtension == "cmo"||fileExtension == "xml") {
         var fd = new FormData();
        fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEve`enter code here`ntListener("abort", uploadCanceled, false);
        xhr.open("POST", "/post_uploadReq");
        xhr.send(fd);
        }
        else {
            alert("You must select a valid odx,pdx,xml or cmo file for upload");
            return false;
        }

      }

이것을 시도, 아주 잘 작동합니다

참고URL : https://stackoverflow.com/questions/5796537/input-type-file-limit-selectable-files-by-extensions