오랫동안 개발자들은이 문제를 해결하기위한 솔루션으로 Flash를 사용해 왔지만 Flash 버전으로 인해 절단으로 인한 문제는 때때로 악몽이됩니다. 일부 웹 사이트는 Enableype = multipart/form-data 속성을 사용하지만이 속성은 진행 상황을 표시하기 위해 특별한 설정을 작성해야합니다 우리. 당신이 원하는 것.
이제 HTML5가 왜이 문제를 해결할 수 있는지, 얼마나 잘 할 수 있는지 살펴 보겠습니다.
HTML5로 파일을 업로드하십시오HTML5 표준에서 XMLHTTPREQUEST 객체는 XMLHTTPREQUEST 레벨 2로 알려진 재정의되어 다음 5 가지 새로운 기능을 포함합니다.
1. 파일, 블로브 및 양식 데이터와 같은 업로드 및 다운로드 바이트 지원 지원
2. 업로드 및 다운로드 진행 상황이 추가되었습니다
3. 크로스 도메인 요청 지원
4. 익명 요청을 허용합니다 (즉, HTTP를 보내지 않는 참조 부분).
5. 요청의 시간 초과를 허용합니다
이 튜토리얼에서는 주로 첫 번째 및 두 번째 기능, 특히 두 번째 항목이 원하는 업로드 진행 상황을 제공 할 수 있습니다. 이전 계획과 달리이 솔루션은 서버가 특별한 설정을 만들 필요가 없으므로 모든 사람은 튜토리얼을 보면서 시도 할 수 있습니다.
위의 다이어그램은 우리가 달성 할 수있는 내용입니다.
1. 파일 이름, 유형, 크기와 같은 업로드 된 파일 정보 표시
2. 실제 진행 상황을 보여줄 수있는 진행률 표시 줄
3. 업로드 속도
4. 나머지 시간의 추정
5. 업로드 된 데이터의 양
6. 업로드가 끝나면 서버의 응답이 반환됩니다.
또한 xmlhttprequest를 사용하면 업로드 프로세스가 비동기식이므로 사용자가 파일을 업로드 할 때 웹 페이지에서 다른 요소를 계속 작동 할 수 있으며 업로드가 완료 될 때까지 기다릴 필요가 없습니다. 업로드가 끝나면 서버로부터 응답을 다시 얻을 수 있으므로 전체 업로드 프로세스는 매우 논리적입니다.
HTML5의 진행 상황HTML5는 새로운 진행 상황을 추가하여 다음 정보를 제공합니다.
1. 총 -파일 크기
2.로드 -업로드 된 크기
3. 길이 컴퓨터 -진행 상황을 계산할 수있는 것
정보는 많지 않지만 파일의 진행 상황을 계산하는 것으로 충분합니다. 물론, 여전히 직접 제공하지 않는 많은 것들이 있습니다.
HTML일반 파일 업로드 코드와 크게 다르지 않습니다. 그러나 입력 태그는 onchange에서 JavaScript 함수를 연관시킵니다.
<! row> <label for = filetoupload> 업로드 할 파일 선택 </label> <입력 유형 = 파일 이름 = filetoupload id = filetoupload = fileselec ted ();/> </div> <div id = filename> </div> <div id = filesize> </div> <div id = filetype> </div> <div class = row> <입력 유형 = 버튼 onclick = uploadfile () value = upload/> << div자바 스크립트
HTML에서 입력을 사용하면 JS 코드에서 filelist 객체를 얻을 수 있습니다. 이 객체는 html5의 새로 추가 된 파일 API의 일부입니다. 각 filleList 객체는 파일 객체 세트 세트이며 다음과 같은 속성이 있습니다.
1. 이름 - 파일 이름 (경로 포함)
2. 유형 -파일 유형 (소문자)
3. 크기 -파일 크기 (단위는 바이트입니다)
이것이 바로 우리에게 필요한 것입니다. 물론 HTML5에는 Filereader 객체도 있지만 여기서는 사용하지 않았습니다. 이제 위의 세 컨텐츠를 통해 서버 중 압력을 줄이고 보안 요소를 향상시키기 위해 사용자가 업로드 한 크기 및 파일 유형을 제어 할 수 있습니다.
함수 filed (var file.getElementBod) (file) {var filesize = 0; .Size * 100 / (1024 * 1024)) / 100) .tring () + 'mb'; getElementByID ( 'Filename') '유형 :' + file.type;}}그렇다면 사용자가 좋은 파일을 선택하고 업로드를 클릭하면 어떻게됩니까?
var xhr = var fd = getlemberdata (); xhr.addeventlistener (오류, uploaded, false); Send (FD);} 기능 업로드 프로 로스 (EVT) {evt.lengthcomputable = math.round. ) + '%';} else {docut (evt.target.responsetext);} function uploadcanceled (evt) {alert (업로드는 벤이 사용자의 선장이 있거나 브라우저가 연결을 삭제했습니다);};두 번째 코드 라인에서 JS 코드는 다른 HTML5에서 시작한 또 다른 새로운 객체 -formData를 사용합니다. FormData 객체는 사용자의 양식 데이터 세트입니다. 값은 숫자, 문자열 및 파일을 포함 할 수 있습니다. 이 객체를 돌려 서버에 데이터를 제출합니다.
물론 코드에서 다음과 같은 코드 에서이 객체를 수동으로 빌드 할 수도 있습니다.
var fd. fd. Append (shiv kumar); ]);
주제로 돌아갑니다. 이전 코드를 되돌아 보면 xmlhttprequest의 많은 이벤트 모니터링을 추가했습니다. 특히, 우리가 연결하는 것은 xmlhttprequest 자체가 아니라 UploadProgress와 같은 속성이라는 점에 유의해야합니다.
완전한 코드마지막으로 전체 코드를 살펴보십시오.
<xmlhttprequest -minimal> <script type/javascript> flesented fileselect를 사용하여 파일을 업로드합니다 [0]; if) {var filesize = 0; if (file.size> 1024 * 1024) filesize = (math.round * 100 / (1024 * 1024)) .tring () .tring ( ) + 'mb'; else filesize = (file.size * 100 / 1024) .tring () + 'kb'; .name; getElementById ( 'Filesize'). fd. Append, getElementById ( 'FiletOUPLOAD'). false); PercentComplete = ev.loaded * 100 / evt.total); 계산하려면 서버가 응답 */ alert (evt.target .responsext)를 다시 보낼 때 발생합니다 사용자 또는 브라우저가 연결을 삭제했습니다.);} </script> </head> <boody> <form id = form1 Enctype = multipart/form-data method = post action = upload.phload.php> <div class = row > <label = filetoup load> 업로드 할 파일 선택 </label> <입력 유형 = 파일 이름 = filetoupload id = filetoupload onchange = fileselect ();/> </div> <div id = filename> </div> < div id = fi lesize> </div> <div id = filetype> </div> <div class = row> <입력 유형 = 버튼 onclick = uploadfile () value = upload/> </div m> </body> </html>우리의 작업이 완료 되었습니까? 이 코드는 파일 업로드 작업을 완료 할 수 있었고 업로드의 진행 상황을 표시 할 수 있기 때문에 완료되었다고 말할 수 있습니다. CSS Beautify 등 CSS와 같이 수행되지 않은 많은 것들이 있습니다. 그러나 이것은 우리 기사의 주제가 아닙니다.
마지막으로, 튜토리얼 코드는 새로운 기능을 지원하는 브라우저에서 작동해야합니다.
위는이 기사의 모든 내용입니다.