입력 유형 = 파일을 만드는 방법은 pdf 및 xls 만 허용해야합니다.

나는 사용했다 <input type= "file" name="Upload" >

이제 .pdf 및 .xls 파일 만 허용하여이를 제한하고 싶습니다.

제출 버튼을 클릭하면이를 확인해야합니다.

웹 페이지에서 파일 (PDF / XLS)을 클릭하면 자동으로 열립니다.

누구든지 이것에 대한 몇 가지 예를 들어 주시겠습니까?

속성을 사용하고 accept허용 된 MIME 유형을 추가하여이를 수행 할 수 있습니다. 그러나 모든 브라우저가 해당 속성을 존중하는 것은 아니며 일부 코드 검사기를 통해 쉽게 제거 할 수 있습니다. 따라서 두 경우 모두 서버 측에서 파일 유형을 확인해야합니다 (두 번째 질문).

예:

<input type="file" name="upload" accept="application/pdf,application/vnd.ms-excel" />

세 번째 질문 "웹 페이지에서 파일 (PDF / XLS)을 클릭하면 자동으로 열립니다."

당신은 그것을 달성 할 수 없습니다. 클라이언트 컴퓨터에서 PDF 또는 XLS를 여는 방법은 사용자가 설정합니다.

이것을 사용할 수 있습니다.

HTML

<input name="userfile" type="file" accept="application/pdf, application/vnd.ms-excel" />

지원 만. PDF 및. XLS 파일

안타깝게도 선택시 보장 할 수있는 방법은 없습니다.

일부 브라우저 accept는 input태그 속성을 지원합니다 . 이것은 좋은 시작이지만 완전히 신뢰할 수는 없습니다.

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />

a를 사용하고 cfinput유효성 검사를 실행하여 제출시 파일 확장자 를 확인할 수 있지만 MIME 유형은 확인할 수 없습니다. 이것은 더 좋지만 여전히 어리석은 것은 아닙니다. OSX의 파일에는 파일 확장자가없는 경우가 많거나 사용자가 파일 형식을 악의적으로 잘못 지정할 수 있습니다.

ColdFusion 은 결과 속성 ( )을 cffile사용하여 MIME 유형 을 확인할 수 있지만 업로드 후에 만 수행 할 수 있습니다. 이것이 최선의 방법이지만 MIME 유형이 여전히 잘못 될 수 있으므로 여전히 100 % 안전하지는 않습니다.contentTypecffile.contentType

JavaScript를 사용할 수 있습니다. JavaScript로이 작업을 수행하는 데있어 가장 큰 문제는 입력 파일을 재설정하는 것임을 고려하십시오. 음, 이것은 JPG로만 제한됩니다 (PDF의 경우 MIME 유형 과 매직 넘버 를 변경해야합니다 ).

<form id="form-id">
  <input type="file" id="input-id" accept="image/jpeg"/>
</form>

<script type="text/javascript">
    $(function(){
        $("#input-id").on('change', function(event) {
            var file = event.target.files[0];
            if(file.size>=2*1024*1024) {
                alert("JPG images of maximum 2MB");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            if(!file.type.match('image/jp.*')) {
                alert("only JPG images");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            var fileReader = new FileReader();
            fileReader.onload = function(e) {
                var int32View = new Uint8Array(e.target.result);
                //verify the magic number
                // for JPG is 0xFF 0xD8 0xFF 0xE0 (see https://en.wikipedia.org/wiki/List_of_file_signatures)
                if(int32View.length>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && int32View[3]==0xE0) {
                    alert("ok!");
                } else {
                    alert("only valid JPG images");
                    $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                    return;
                }
            };
            fileReader.readAsArrayBuffer(file);
        });
    });
</script>

이것이 Firefox 및 Chrome의 최신 버전과 IExplore 10에서 테스트되었음을 ​​고려하십시오.

MIME 유형의 전체 목록은 Wikipedia를 참조하십시오 .

매직 넘버의 전체 목록은 Wikipedia를 참조하십시오 .

다음과 같이 시도해 볼 수 있습니다.

<input type= "file" name="Upload" accept = "application/pdf,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">

또는 (asp.net mvc에서)

@Html.TextBoxFor(x => x.FileName, new { @id = "doc", @type = "file", @accept = "application/pdf,.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" })

셸을 포함한 모든 파일을 업로드 할 수있는 Firefox의 라이브 HTTP 헤더와 같은 도구가 있기 때문에 파일 서버 측을 필터링합니다. 사람들이 귀하의 사이트를 해킹 할 수 있습니다. 안전을 위해 서버 사이트를 수행하십시오.

이 특정 예는 다중 파일 업로드에 대한 것이지만 필요한 일반 정보를 제공합니다.

https://developer.mozilla.org/en-US/docs/DOM/File.type

/ download /에서 파일에 대해 작업하는 한 이것은 자바 스크립트 질문이 아니라 서버 구성입니다. 사용자가 PDF 또는 XLS 파일을 열 수있는 항목이 설치되어 있지 않은 경우 다운로드 할 수 있습니다.

파일 업로드 컨트롤을 사용자가 버튼 클릭으로 업로드 할 수있는 파일 유형을 제한하려면 이것이 방법입니다.

<script type="text/JavaScript">
<!-- Begin
function TestFileType( fileName, fileTypes ) {
if (!fileName) return;

dots = fileName.split(".")
//get the part AFTER the LAST period.
fileType = "." + dots[dots.length-1];

return (fileTypes.join(".").indexOf(fileType) != -1) ?
alert('That file is OK!') : 
alert("Please only upload files that end in types: \n\n" + (fileTypes.join(" .")) + "\n\nPlease select a new file and try again.");
}
// -->
</script>

그런 다음 위 버튼의 onClick과 같은 이벤트에서 함수를 호출 할 수 있습니다.

onClick = "TestFileType (this.form.uploadfile.value, [ 'gif', 'jpg', 'png', 'jpeg']);"

이 작업을하기 위해 변경할 수 있습니다 PDF및XLS

여기에서 구현 된 것을 볼 수 있습니다. 데모