파일 입력 : 양식 제출 전에 파일이 존재하는지 Chrome에서 확인하지 않음

Question

최근에 파일 업로드 중에 내 서버가 중단되는 버그를 발견했습니다.

사용자가 파일 입력을 클릭하고 업로드 할 파일을 선택하는 경우. 사용자가 양식을 제출하기 전에 파일을 삭제하거나 파일 이름을 변경하면 Chrome은 여전히 ​​빈 파일을 보냅니다. (Firefox와 IE가 오류를 올바르게 처리하는 동안)

사용자가 "제출"버튼을 클릭하면 파일 크기를 확인하려고 시도했지만 null이 아닙니다.

 if (file.size == 0) { 
      NotificationFactory.AlertMessage({ messageType: "error", message: "File is missing" }); 
     } 

나는 이미 서버 쪽에서 오류를 처리했지만 클라이언트 쪽에서 유효성 검사를 일부 추가하려고합니다.

Answer 1

File API JavaScript를 사용하면 element.files[0].size을 사용하여 객체의 size property을 통해 파일의 크기를 가져올 수 있습니다.

우리는 파일이 실제로 선택되었는지 확인 typeof를 사용

if(typeof el.files[0] !== 'undefined' && el.files[0].size > 0) { 
    /* Success! */ 
} 

(el.files[0]이 정의되지 않은 그렇지 않은 것), 그리고 그 통과하면 우리는 확인 : 파일이 자바 스크립트로 존재하는지 확인하기 위해, 우리는 간단하게 할 수있는 파일 크기가 0보다 큽니다.

여기 Chrome에서 테스트 한 JSFiddle demo입니다.

그러나 JavaScript를 사용하지 않는 사용자를 위해 서버 측 유효성 검사가 필요합니다.