<input type =“file”>이 이미지 파일 만 받도록 허용하는 방법은 무엇입니까?

375

<input type="file">태그를 통해 이미지 파일 만 업로드해야합니다 .

현재 모든 파일 형식을 허용합니다. 그러나 나는 등 특정 이미지 파일 확장자에 제한하려면 .jpg, .gif등

이 기능을 어떻게 달성 할 수 있습니까?

html

— kbvishnu
소스

서버 측에서 사용 된 기술은 무엇입니까?

— Erdal G.

1

kbvishnu, 아마도 당신은 당신이 너무 오래 전에 받아 들인 대답을 재고 할 수 있습니다. 다른 답변을 수락하지 않아도됩니다. 나는 우리가 답변에 얻은 깃발의 수와 다른 답변과 비교 한 투표 수준에 따라 적어도 그것을 받아들이지 않는 것을 고려해야한다고 제안합니다.

— Aaron Hall

942

입력 태그 의 accept 속성을 사용하십시오 . 따라서 PNG, JPEG 및 GIF 만 허용하려면 다음 코드를 사용할 수 있습니다.

<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />

스 니펫 확장

또는 간단히 :

<input type="file" name="myImage" accept="image/*" />

스 니펫 확장

이는 사용자에게 표시 할 파일 형식에 대한 힌트 만 브라우저에 제공하지만 쉽게 우회 할 수 있으므로 업로드 된 파일도 항상 서버에서 확인해야합니다.

IE 10 이상, Chrome, Firefox, Safari 6 이상, Opera 15 이상에서 작동해야하지만 모바일에 대한 지원은 매우 스케치 적이며 (2015 년 기준) 일부 보고서에 따르면 실제로 일부 모바일 브라우저가 아무것도 업로드하지 못하게 할 수 있습니다. 대상 플랫폼을 잘 테스트하십시오.

자세한 브라우저 지원은 http://caniuse.com/#feat=input-file-accept를 참조하십시오 .

— 매드 캡 웃음
소스

@madcap accept="file/csv, file/xls"은 유효 합니까 ??

— KNU

19

확실 image/x-png합니까? 이 목록에 따르면, 그것은 단지 image/png입니다. iana.org/assignments/media-types/media-types.xhtml

— Micros

6

그게 정답입니다! 아직 지원하지 않는 브라우저 때문에 보안을 위해 서버 측을 확인해야한다는 메모가 없습니다.

— Erdal G.

1

아마도 대답이 대답했을 때 효과가 있었지만 시도했지만 FF에서는 효과가 없었습니다. accept = ". png, .jpg, .jpeg"를 추가해야했습니다. 예 : jsfiddle.net/DiegoTc/qjsv8ay9/4

— Diego

1

완전히 의존하지 마십시오. 다른 파일도 쉽게 받아 들일 수 있습니다. 열린 파일 창에서 허용되는 파일 형식 만 변경하면됩니다.

163

이것을 사용하여 :

<input type="file" accept="image/*">

FF와 Chrome 모두에서 작동합니다.

— 타이 일로
소스

14

accept 속성은 유효성 검사 도구가 아니며 모든 업로드는 항상 서버에서 유효성을 검사해야합니다.

— TlonXP

1

여전히 네이티브 안드로이드 브라우저에서 지원되지 않지만 다른 브라우저에서도 잘 작동합니다 caniuse.com/#feat=input-file-accept

— mcy

파일 프롬프트에서 유형 드롭 다운에 "이미지 파일"이 표시되므로이 솔루션이 마음에 듭니다.

— hardsetting

SVG를 허용하므로 원하지 않을 수도 있으므로주의하십시오.

— stephenmurdoch '

최대 이미지 파일 .png, .jpg, .jpeg, .gif, .bmp, .ico, .tiff, .svg, .ai, .psp, .pcd, .pct, .raw를 허용합니다. 따라서 유형을 구체적으로 언급하는 것이 좋습니다.

— Thamarai T

76

이렇게 사용하세요

<input type="file" accept=".png, .jpg, .jpeg" />

그것은 나를 위해 일했다

https://jsfiddle.net/ermagrawal/5u4ftp3k/

— 어. 모 히트 아그라 왈
소스

iOS 12에서는 작동하지 않습니다. 사용자는 여전히 장치에서 비디오를 선택할 수 있습니다.

— user3160227 2016 년

28

단계 :
1. 입력 태그에 accept 속성 추가
2. javascript로 유효성 검사
3. 서버 측 유효성 검사를 추가하여 내용이 실제로 파일 형식인지 확인합니다.

HTML 및 자바 스크립트의 경우 :

<html>
<body>
<input name="image" type="file" id="fileName" accept=".jpg,.jpeg,.png" onchange="validateFileType()"/>
<script type="text/javascript">
    function validateFileType(){
        var fileName = document.getElementById("fileName").value;
        var idxDot = fileName.lastIndexOf(".") + 1;
        var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
        if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
            //TO DO
        }else{
            alert("Only jpg/jpeg and png files are allowed!");
        }   
    }
</script>
</body>
</html>

설명:

accept 속성은 파일 선택기 팝업에 표시 될 파일을 필터링합니다. 그러나 유효성 검사는 아닙니다. 브라우저에 대한 힌트 일뿐입니다. 사용자는 여전히 팝업에서 옵션을 변경할 수 있습니다.
자바 스크립트는 파일 확장자에 대해서만 유효성을 검사하지만 선택 파일이 실제 jpg 또는 png인지 실제로 확인할 수는 없습니다.
따라서 서버 측에서 파일 내용 유효성 검사를 작성해야합니다.

— 수리야 카메 스와 라 라오 라비
소스

1

가장 완전한 답변

— paranoidhominid

27

이것은 달성 할 수 있습니다

<input type="file" accept="image/*" />

그러나 이것은 좋은 방법이 아닙니다. 이미지를 확인하기 위해 서버 측에서 코드를 작성해야합니다.

이미지 파일이 실제 이미지인지 또는 가짜 이미지인지 확인

if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    }
    else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}

자세한 내용은 여기를 참조하십시오

http://www.w3schools.com/tags/att_input_accept.asp
http://www.w3schools.com/php/php_file_upload.asp

— 아 ok 데 밧발
소스

5

이 문서 accept를 <input type="file">읽기 위해 속성을 사용할 수 있습니다 http://www.w3schools.com/tags/att_input_accept.asp

— 유산
소스

3

type = "file"및 accept = "image / *"(또는 원하는 형식)을 사용하여 사용자는 특정 형식의 파일을 선택할 수 있습니다. 그러나 사용자는 다른 유형의 파일을 선택할 수 있으므로 클라이언트 측에서 다시 확인해야합니다. 이것은 나를 위해 작동합니다.

<input #imageInput accept="image/*" (change)="processFile(imageInput)" name="upload-photo" type="file" id="upload-photo" />

그런 다음 자바 스크립트에서

processFile(imageInput) {
    if (imageInput.files[0]) {
      const file: File = imageInput.files[0];
      var pattern = /image-*/;

      if (!file.type.match(pattern)) {
        alert('Invalid format');
        return;
      }

      // here you can do whatever you want with your image. Now you are sure that it is an image
    }
  }

— 마티 카사 넬리
소스

그들이 허용 할 모든 다른 확장 지정할 개발자를 필요로하지 않고 파일은 이미지가 실제로 있는지 여부를 확인합니다 이것은 최고의 답변입니다

— 아담 마샬

나는 당신의 아이디어를 얻는다. 이것은 유효한 JS 구문 const file: File = imageInput.files[0];입니까? 또한, 입력에 id를 할당하는 것은 종래의 방식으로 수행되지 않는다.

— Ivan P.

사실, JS는 아니고 typescript입니다. 블록 코드는 Angular 프로젝트에서 복사되었습니다. 자바 스크립트 파일에서 사용하려면 유형 정의 (: File)를 생략해야합니다.

— Mati Cassanelli

0

한 번에 여러 이미지를 업로드하려는 경우 multiple입력 에 속성을 추가 할 수 있습니다 .

upload multiple files: <input type="file" multiple accept='image/*'>

스 니펫 확장

— JerryGoyal
소스