Front End/Javascript

[JS] input [type="file"] 용량 제한

TTOWA 2023. 6. 9. 10:53

1. HTML 

<input type="file" name="file_size" title="파일명">

2. Javascript

  /* 파일용량 제한*/
  $("input[name=file_size").on("change", function(){
    let maxSize = 5 * 1024 * 1024; //* 5MB 사이즈 제한
	let fileSize = this.files[0].size; //업로드한 파일용량

    if(fileSize > maxSize){
		alert("파일첨부 사이즈는 5MB 이내로 가능합니다.");
		$(this).val(''); //업로드한 파일 제거
		return; 
	}
  });

※ maxSize 설정시 참고 하세요. (데이터 크기는 1024의 제곱으로 표현합니다)

  • 1024 = 1KB
  • 1024 * 1024 = 1MB
  • 1024 * 1024 * 1024 = 1GB
  • 1024 * 1024 * 1024 * 1024 = 1TB

 

 

https://ttowa.tistory.com/entry/HTML-input-typefile-속성property-정리

 

[HTML] input [type="file"] 속성(property) 정리

1. accept 속성 서버로 업로드하는 파일의 type을 명시 합니다.( ex: .jpg) 하나 이상의 확장자를 사용할 경우 콤마로 구분 합니다. ( ex: .jpg,.png,.svg) accept을 사용하지하지 않으면 모든 파일을 입력 받습

ttowa.tistory.com

 

 

 

이 글이 도움이 되었다면 ♡(공감), 광고 눌러 주세요.
큰 도움이 됩니다.

 

반응형