>  기사  >  웹 프론트엔드  >  JavaScript를 사용하여 업로드할 때 파일 형식 확인

JavaScript를 사용하여 업로드할 때 파일 형식 확인

PHPz
PHPz앞으로
2023-09-20 17:25:031344검색

使用 JavaScript 上传时进行文件类型验证

취업에만 초점을 맞춘 소셜 미디어 플랫폼에서는 사용자가 계정을 만들 수 있으며 채용 담당자가 분석할 수 있도록 필요한 문서를 업로드하라는 메시지가 표시됩니다. 사용자로부터 파일을 수집하기 위해 이러한 웹사이트는 사용자 세부 정보 양식에 "파일 업로드" 또는 "파일 선택" 옵션을 제공하며 ".pdf", ".jpg", ".png와 같은 특정 파일 형식만 허용합니다. " "기다리다. 이 프로세스를 파일 확인이라고 하며 JavaScript를 사용하여 수행할 수 있습니다.

이 기사에서는 JavaScript를 사용하여 파일 형식의 유효성을 검사하는 옵션을 설계합니다. 이를 수행하는 방법은 다음과 같습니다 -

  • 1단계 - verifyFileType()이라는 함수를 만듭니다.

  • 2단계 - 파일 입력 필드 값이 변경되면 verifyFileType() 함수를 트리거합니다.

  • 3단계 - document.getElementById('fileInput').files[0]를 사용하여 파일 입력 필드에서 선택한 파일을 검색합니다.

  • 4단계 - 허용되는 파일 형식(예: "image/jpeg", "image/png", "application/pdf")을 포함하는 allowedTypes라는 배열을 정의합니다.

  • 5단계 - include() 메소드를 사용하여 선택한 파일의 유형이 allowedTypes 배열에 포함되어 있는지 확인합니다.

    allowedTypes 배열에 있는 경우 파일 이름을 화면에 표시합니다.

    파일 형식을 찾을 수 없는 경우 아래 단계를 따르세요.

  • 6단계 - "잘못된 파일 형식입니다. JPEG, PNG 또는 PDF 파일을 선택하세요.

  • "라는 경고 메시지를 사용자에게 표시합니다.
  • 7단계 - document.getElementById('fileInput').value를 빈 문자열로 설정하여 파일 입력 필드의 이름을 지웁니다.

아래 예에서는 위의 방법을 사용하여 업로드하는 동안 파일 형식의 유효성을 검사하려고 합니다. -

으아악

위 절차를 실행한 후 파일을 업로드해 보세요. 파일이 ".jpg", ".png" 또는 ".pdf"인 경우 파일 이름이 화면에 표시됩니다. 그렇지 않으면 "잘못된 파일 형식"이라는 경고가 표시됩니다.

위 내용은 JavaScript를 사용하여 업로드할 때 파일 형식 확인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제