이 예제의 장점은 개체 검색 스크립트가 false를 반환해도 이 양식은 계속 작동하므로 기능은 그대로 유지됩니다. 이렇게하면 파일 요소뿐만 아니라 파일 선택기를 호출하는 링크가 설정됩니다 (덜 매력적이지 않은 사용자 인터페이스가 표시되지 않도록 파일 입력을 숨겨 두기 때문에). 파일 선택기를 호출하는 방법과 마찬가지로 click() 메서드를 사용하여 숨겨진 파일 입력 요소를 사용하는 섹션에서 설명합니다. 파일 속성은 파일 업로드 단추로 선택한 파일 또는 파일을 나타내는 FileList 개체를 반환합니다. 자신의 서버에 파일을 업로드하고 싶으십니까? CSS 파일, JavaScript 파일을 포함하고 사용 중인 기술에 따라 서버 측에서 업로드를 처리하기만 하면 됩니다. 다른 종속성은 전혀 없습니다. 디렉터리, 파일, Blob, 로컬 URL, 원격 URL 및 데이터 URI를 허용합니다. 사용자가 하나의 파일만 선택하면 목록의 첫 번째 파일만 고려해야 합니다. 이 경우 handleFiles() 함수 자체는 매개 변수를 전달한 이벤트 처리기에 의해 호출된 이전 예제와 달리 이벤트 처리기입니다. 축하합니다, 당신은 성공적으로 작동하는 업로드 양식을 만들었습니다.

파일을 성공적으로 업로드하거나 이전에 $_FILES 슈퍼글로벌을 사용한 적이 없다면 이것은 흥미로운 작은 과정입니다. HTML5의 DOM에 추가된 파일 API를 사용하면 웹 콘텐츠에서 사용자에게 로컬 파일을 선택한 다음 해당 파일의 내용을 읽도록 요청할 수 있습니다. 이 선택은 HTML 요소를 사용하거나 끌어서 놓기로 수행할 수 있습니다. 지금 – 이 모든 데이터가 제대로 진행되고 있는지 어떻게 테스트 할 수 있습니까? 파일 데이터를 인쇄해 보겠습니다. 여기서 사용자가 선택한 파일을 처리하는 루프는 각 파일의 형식 특성을 확인하여 MIME 형식이 문자열 “image/”로 시작되는지 확인합니다. 이미지인 각 파일에 대해 새 img 요소를 만듭니다. CSS는 예쁜 테두리 나 그림자를 설정하고 이미지의 크기를 지정하는 데 사용할 수 있으므로 여기에서 수행 할 필요가 없습니다. Fine Uploader의 기본 동작은 파일을 선택한 즉시 업로드를 시도하는 것입니다. 하나의 옵션을 사용하면 모든 파일을 대기열에 간편하게 대기한 다음 Fine Uploader 인스턴스에서 uploadStoredFiles()를 호출하여 나중에 업로드를 시작할 수 있습니다.