나는 사용했다 <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 % 안전하지는 않습니다.contentType
cffile.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에서 테스트되었음을 고려하십시오.
답변
다음과 같이 시도해 볼 수 있습니다.
<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 파일을 열 수있는 항목이 설치되어 있지 않은 경우 다운로드 할 수 있습니다.