html5 파일 업로드 다운로드

DOM에서 제공 하는 filelist 개체에는 사용자가 선택한 모든 파일, 파일 개체로 지정 된 파일이 모두 나열 됩니다. 파일 목록 길이 속성의 값을 확인 하 여 사용자가 선택한 파일 수를 결정 합니다. 파일이 이미지/* mime 형식과 일치 하는 경우 readed는 fileereader API를 사용 하며 이벤트 처리기에서 $img (DOM 이미지 요소)가 제공 됩니다. 업로드 센터 라는 작은 웹 응용 프로그램을 개발, 그 사람들이 자신의 컴퓨터에서 사진을 업로드 할 수 있도록 드래그 하 여 브라우저 창에, 새로운 HTML5 api를 현대적인 브라우저에 의해 노출 가능한 그들을 떨어뜨리고 있다. formdata 개체는 기존 서버가 처리할 수 있는 MIME 형식 다중/양식 데이터를 사용 하 여 요청 데이터를 자동으로 생성 합니다. 데이터에 파일 필드를 추가 하려면 확장명이 파일 경로에서 생성할 수 있는 file 개체를 사용 합니다. formdata 개체는 다음 단순히 xmlhttprequest를 전달할 수 있습니다. 이제 HTML의 파일 업로드 컨트롤의 정상적인 기능에 따라, 우리는 파일 선택 버튼을 클릭 하면, 그것은 파일 열기 대화 상자를 열고 우리가 파일을 선택할 수 있습니다. 이제 우리의 목표는, 파일을 선택한 후, 자동으로 파일을 읽고 페이지에 파일 크기를 표시 합니다. 이를 위해 파일 업로드 컨트롤의 onchange 이벤트를 호출 하 고 다음 코드를 작성 했습니다.

코드의 대부분은 이미 댓글을 달았습니다. 따라서 나는 당신이이 부호를 전부 이해할 것 이라는 점을 희망할 것 이다. 어쨌든-어떻게 작동: 우리가 파일을 선택-함수 ` fileelected ` 실행 됩니다. 우리는 모든 불필요 한 형식을 필터링 (업로드 다음 형식으로 허용: bmp 파일, gif를, 도트 jpg, png로, tif), 큰 파일이 경우에는-우리가 경고 메시지를 그릴 것입니다. 그런 다음 fileereader를 통해:: readasdataurl 우리는 선택한 파일의 실시간 미리 보기를 그릴 것입니다. 또한 이미지 이름, 크기, 유형 및 치수에 대 한 또 다른 정보를 표시 합니다. 업로드 과정은 조금 복잡 합니다. 그러나 일반적으로, 우리는 xmlhttprequest 개체를 준비, 다음 이벤트에 이벤트 리스너를 추가: 진행, 로드, 오류 및 중단.

그리고 이후-게시 양식 데이터 (필자는 formdata 클래스를 사용) 우리의 ` 업로드. php ` 수신기. 위에 표시 된 fileupload () 함수는 throbber를 만들고,이는 진행률 정보를 표시 하는 데 사용 되며, 데이터 업로드를 처리 하기 위한 xmlhttprequest도 만듭니다. 파일의 전체 코드는 다음과 같습니다. 여기서는 이벤트에서 datatransfer 필드를 검색 하 고 파일 목록을 가져온 다음 handlefiles ()로 전달 합니다. 이 시점부터 파일 처리는 사용자가 input 요소를 사용 했거나 끌어서 놓기를 사용할 때와 동일 합니다. 업 로더를 첨부 한 경우

, 당신은 그 이벤트를 몇 가지 멋진 UI를 변경 할 들을 수 있습니다. 다음으로 멋진 사진 공유 웹 사이트를 개발 하 고 사용자가 실제로 업로드 하기 전에 HTML5 이미지 축소판 미리 보기를 사용 하려는 경우를 가정해 보겠습니다. 앞에서 설명한 대로 input 요소나 놓기 영역을 설정 하 고 아래에 handlefiles () 함수와 같은 함수를 호출할 수 있습니다. 이제 우리의 다음 목표는 파일을 웹 API를 사용 하 여 업로드할 수 있도록이 특정 파일을 복사 하 고 특정 위치에 저장 됩니다.

이를 위해, 우리는 이미 버튼 이름 업로드를 만들었습니다. 업로드를 위해이 버튼을 클릭 해야 합니다. 이 단추를 클릭 하면 파일을 복사 하 여 특정 위치에 저장 하기 위해 내부적으로 웹 API 컨트롤러로 리디렉션하는 angularjs 함수를 호출 합니다. 나는 여기 위치를 위해 일시적인 인터넷 파일 폴더를 이용 하 고 있다. 여기에 어떻게 드래그 하 여 네이티브 자바 스크립트로 여러 개의 파일을 업로드 드롭 구현할 수 있습니다. 아니 플러그인 필요 합니다. 그냥 평범한 오래 된 새로운 HTML5. 다시 작동 데모가 있습니다. 당신은 그것을 테스트 하기 위해 파이어 폭스 3.6이 필요 합니다. 전체 소스 코드를 GitHub에 있을 수 있습니다. 데모 다운로드 다운로드/추가 정보 만약, 당신이 웹사이트 또는 블로그를 소유 하 고, 그리고 위의 무료 HTML5, CSS3, 아 약 스, jQuery 업로드 파일 스크립트를 확실히 도움이 될 것 입 업로드 파일 양식 스크립트 디자인을 찾고 싶어요, 다음을 달성 가능한 가장 효율적 이며 효과적인 방법으로 귀하의 목표.

Comments are closed.