programing

허용 방법허용 방법이미지 파일만 허용하시겠습니까?이미지 파일만 허용하시겠습니까?

kakaobank 2023. 5. 27. 11:52
반응형

허용 방법이미지 파일만 허용하시겠습니까?

이미지 파일만 업로드하면 됩니다.<input type="file">꼬리표를 달다

현재는 모든 파일 형식을 허용합니다.그러나 다음을 포함하는 특정 이미지 파일 확장자로만 제한하고 싶습니다..jpg,.gif기타.

이 기능을 사용하려면 어떻게 해야 합니까?

입력 태그의 허용 특성을 사용합니다.PNG, JPEG 및 GIF만 허용하려면 다음 코드를 사용합니다.

<label>Your Image File
  <input type="file" name="myImage" accept="image/png, image/gif, image/jpeg" />
</label>

간단히 말하면:

<label>Your Image File
  <input type="file" name="myImage" accept="image/*" />
</label>

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

IE 10+, Chrome, Firefox, Safari 6+, Opera 15+에서 작동해야 하지만 모바일(2015년 기준)에서는 지원이 매우 개략적이며 일부 보고서에서는 실제로 일부 모바일 브라우저가 아무것도 업로드하지 못할 수 있으므로 대상 플랫폼을 잘 테스트해야 합니다.

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

사용 방법:

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

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

이렇게 사용합니다.

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

그것은 나에게 효과가 있었다.

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

단계:
입력 태그에 수락 속성 추가
Javascript로 검증
내용이 정말로 예상되는 파일 형식인지 확인하기 위해 서버 측 유효성 검사를 추가합니다.

HTML 및 Javascript의 경우:

<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>

설명:

  1. accept 속성은 파일 선택기 팝업에 표시될 파일을 필터링합니다.그러나 이것은 검증이 아닙니다.이것은 브라우저에 대한 힌트일 뿐입니다.사용자는 팝업의 옵션을 계속 변경할 수 있습니다.
  2. Javascript는 파일 확장자만 확인할 수 있지만 선택한 파일이 실제 jpg인지 png인지는 확인할 수 없습니다.
  3. 따라서 서버 측에서 파일 내용 확인을 위해 작성해야 합니다.

이는 다음을 통해 달성할 수 있습니다.

<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

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
    }
  }

추가 사항: 최상의 크로스 브라우저 지원 기능을 갖춘 최신 이미지 파일 형식을 모두 포함하려면 다음과 같이 해야 합니다.

<input type="file" accept="image/apng, image/avif, image/gif, image/jpeg, image/png, image/svg+xml, image/webp">

이렇게 하면 TIFF와 같은 일반적이지 않은 형식이나 PSD와 같은 웹에 적합하지 않은 형식을 제외하고 대부분의 브라우저에서 표시할 수 있는 모든 이미지 파일 형식을 사용할 수 있습니다.

사용할 수 있습니다.accept 성속한의 .<input type="file">이 문서를 읽으십시오. http://www.w3schools.com/tags/att_input_accept.asp

특정 유형의 이미지 또는 다른 파일 형식을 추가하고 코드에서 유효성 검사를 수행할 수 있습니다.

<input  style="margin-left: 10px; margin-top: 5px;" type="file" accept="image/x-png,image/jpeg,application/pdf"
                (change)="handleFileInput($event,'creditRatingFile')" name="creditRatingFile" id="creditRatingFile">
    


  
      handleFileInput(event) {
    console.log(event);
    const file = event.target.files[0];
    if (file.size > 2097152) {
        throw err;
    } else if (
      file.type !== "application/pdf"  &&
      file.type !== "application/wps-office.pdf"   && 
      file.type !== 'application/pdf'  && file.type !== 'image/jpg'  && file.type !== 'image/jpeg'  && file.type !== "image/png"
    ) {
throw err;
    } else {
      
        console.log('file valid')
    }
  }

html;

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

이렇게 하면 모든 이미지 형식을 사용할 수 있지만 PDF나 비디오와 같은 다른 파일은 사용할 수 없습니다.

하지만 장고를 사용한다면, 장고의 형태로.py;

image_field = forms.ImageField(Here_are_the_parameters)

개의 는 추가할 수 .multiple입력에 대한 속성. 

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

간단하고 강력한 방법(동적 승인)

"image/*"와 같은 배열에 형식 배치

var upload=document.getElementById("upload");
var array=["video/mp4","image/png"];
upload.accept=array;
upload.addEventListener("change",()=>{

console.log(upload.value)
})
<input type="file" id="upload" >

ReactJS(후크)를 위해 리팩터링된 다른 사용자의 답변

import React from 'react';

const ImageUploader = () => {

    const handleImageUpload = (e) => {
        // If no file selected, return
        if (e.target.files.length === 0) return false;
        const file = e.target.files[0];

        // If no image selected, return
        if (!/^image\//.test(file.type)) {
            alert(`File ${file.name} is not an image.`);
            return false;
        }

        // ...
    };

    return (
        <>
            <input type='file' accept='image/*' onChange={(e) => handleImageUpload(e)} />
        </>
    );
};

export default ImageUploader;

언급URL : https://stackoverflow.com/questions/3828554/how-to-allow-input-type-file-to-accept-only-image-files

반응형

'programing' 카테고리의 다른 글

이미지에서 주변 공백 제거  (0) 2023.05.27
엔진 "노드"가 이 모듈과 호환되지 않음  (0) 2023.05.27
모든 저장 프로시저를 나열하는 쿼리  (0) 2023.05.27
매크로를 실행할 수 없습니다...이 워크북에서 매크로를 사용할 수 없습니다.  (0) 2023.05.27
WPF의 트리 보기 자동 확장  (0) 2023.05.27

'programing'의 다른글

  • 현재글허용 방법허용 방법이미지 파일만 허용하시겠습니까?이미지 파일만 허용하시겠습니까?

관련글

댓글

티스토리툴바