HTML5 및 JavaScript에서 그래픽 파일 업로드 진행 막대를 업로드하는 방법

키 테이크 아웃

완료시 현재 진행 상황 값 및 값에 대한 속성을 제공하는 HTML5 진행 태그는 그래픽 파일 업로드 진행률 표시 줄을 생성하는 데 사용될 수 있지만 저자는 더 많은 스타일링 옵션을 위해 표준 P 태그를 사용하기로 선택했지만. 진행 막대는 CSS를 사용하여 스타일링 할 수 있으며 녹색 막대는 진행 요소의 두 배 넓은 그래픽으로 만들어지고 업로드가 성공하거나 실패 할 때 단색이 적용됩니다.

진행률 표시 줄은 uploadfile () 함수를 수정하고 새로운 배경 위치를 계산하는 "진행 상황"이벤트 핸들러 함수를 추가하고 업로드가 완료되면 "성공"또는 "실패"클래스를 설정하여 JavaScript에서 구현됩니다.

• 이전 게시물에서는 html5 파일 드래그 앤 드래그 및 드롭을 사용하는 방법, JavaScript를 사용하여 파일을 열고 AJAX를 사용하여 파일을 비동기로 업로드하는 방법을 발견했습니다. 이 시리즈의 마지막 부분에서, 우리는 프로세스의 가장 흥미로운 부분 인 그래픽 진행 막대! 파일 업로드 진행률 표시 줄은 필수 사용자 피드백을 제공하지만 구현하기가 어렵습니다. 지금까지 그게 그렇습니다. Firefox와 Chrome은 모두 진행된 이벤트 핸들러를 제공하는 XMLHTTPREQUEST2 객체를 지원합니다. 그러나 먼저, 진행률 바가 어떻게 구현 될지 고려해 봅시다… html5 진행 태그 새로운 진행 태그는 두 가지 속성을 제공합니다.
값 : 현재 진행 값
• 최대 : 완료시 값
이 시연에서는이 태그가 이상적이었고 Chrome에서는 지원되었지만 Firefox 6에만 나타났습니다. 또한 브라우저는 많은 스타일링 특성을 제공하므로 표준 P 태그를 선호하여 떨어 뜨리지 않았습니다. 이것은 자녀로서 div ID "Progress"로. 스타일링 진행률 우리의 P 태그는 크기가 250px 인 테두리 상자에 파일 이름을 표시합니다.
• 녹색 막대 자체의 경우 진행 요소 (500px)의 두 배나 넓은 그래픽을 만들었습니다. 왼쪽 250px는 색상이 있고 오른쪽 250px는 투명합니다.
이 그래픽은 진행률 표시 줄의 배경 이미지로 사용되며 "x% 0"에 위치합니다. 여기서 x%는 나머지 (완료되지 않은) 비율을 나타냅니다.

진보는“배경 위치 : 100% 0”, 즉 100% 남아있는

에서 시작합니다 진행은“배경 위치 : 0% 0”에서 끝납니다 “배경 위치 : 30% 0”은 70%가 완료되었음을 의미합니다.

업로드가 성공하거나 실패 할 때 클래스를 설정하여 단색이 적용됩니다.

#progress p
{
	display: block;
	width: 240px;
	padding: 2px 5px;
	margin: 2px 0;
	border: 1px inset #446;
	border-radius: 5px;
}

javaScript 에서 진행률 표시 줄 구현 이제 uploadfile () 함수를 수정할 수 있습니다. 유효한 JPG 파일이 발생하면 새 P 태그를 #progress 요소에 추가하고 파일 이름을 텍스트로 추가합니다.

이제 "진행"이벤트 처리기 기능이 필요합니다. 이것은 .loaded 및 .total 속성이있는 객체를 수신합니다 - 새로운 배경 위치를 계산하려면 약간의 수학이 필요합니다.

Ajax에 익숙하다면 OnreadyStateChange 이벤트 핸들러를 인식하게됩니다. 이는 업로드가 완료된시기를 결정하고 그에 따라 진행률 표시 줄을 스타일링합니다 (업로드가 성공하면 "성공"클래스를 설정합니다).

#progress p.success
{
	background: #0c0 none 0 0 no-repeat;
}

#progress p.failed
{
	background: #c00 none 0 0 no-repeat;
}

마지막으로 파일을 이전과 같이 PHP 서버로 보냅니다.

// upload JPEG files
function UploadFile(file) {

	var xhr = new XMLHttpRequest();
	if (xhr.upload && file.type == "image/jpeg" && file.size <= $id("MAX_FILE_SIZE").value) {
	
		// create progress bar
		var o = $id("progress");
		var progress = o.appendChild(document.createElement("p"));
		progress.appendChild(document.createTextNode("upload " + file.name));

우리는 마침내 다음과 같은 해결책을 가지고 있습니다.

		// progress bar
		xhr.upload.addEventListener("progress", function(e) {
			var pc = parseInt(100 - (e.loaded / e.total * 100));
			progress.style.backgroundPosition = pc + "% 0";
		}, false);

파일이 웹 페이지 요소로 드래그하고 떨어지는 것을 활성화합니다. 클라이언트에서 삭제 된 파일을 분석하고 표시합니다 는 파일을 서버에 비동기로 업로드합니다 는 업로드 중에 그래픽 진행률 표시 줄을 보여줍니다 는 점진적인 향상을 사용하여 대부분의 브라우저를 지원합니다 // file received/failed xhr.onreadystatechange = function(e) { if (xhr.readyState == 4) { progress.className = (xhr.status == 200 ? "success" : "failure"); } }; 는 JavaScript 라이브러리가 필요하지 않고 코딩됩니다

그러나 데모 페이지를보십시오. 그러나 PHP가없는 서버에서 호스팅되므로 파일 업로드가 발생하지 않습니다. 테스트하려면 파일을 다운로드하여 코드를 검사하고 자신의 서버에서 호스팅하십시오. 이 시리즈를 즐기고 파일 끌기 및 드롭이 웹 애플리케이션에 도움이되는 방법을 고려하고 있기를 바랍니다. 이 게시물을 읽는 것을 좋아한다면 Learnable을 좋아할 것입니다. 주인으로부터 신선한 기술과 기술을 배울 수있는 곳. 회원은 HTML5 학습과 같은 모든 SitePoint의 eBook 및 대화식 온라인 과정에 즉시 액세스 할 수 있습니다. html5 javaScript 파일 업로드 진행률 바 에 대한 자주 묻는 질문 (FAQ) 진행률 표시 줄의 모양을 사용자 정의 할 수있는 방법은 무엇입니까?
진행 막대의 모양을 사용자 정의하는 것은 CSS를 사용하여 수행 할 수 있습니다. 색상, 높이, 너비 및 진행률 표시 줄의 모양을 변경할 수 있습니다. 예를 들어 색상을 변경하려면 '배경색'속성을 사용할 수 있습니다. 또한 'Border-Radius'속성을 사용하여 진행률 막대를 원형 또는 반올림 할 수 있습니다. CSS의 올바른 클래스 또는 ID를 대상으로 이러한 변경 사항을 진행 막대에 적용해야합니다.
2. 여러 파일 업로드 에이 진행률 표시 줄을 사용할 수 있습니까?
3. 예,이 진행률을 사용할 수 있습니다. 여러 파일 업로드에 대한 막대. 그러나 여러 파일을 처리하려면 JavaScript 코드를 수정해야합니다. 입력 태그의 '다중'속성을 사용하여 여러 파일을 선택할 수 있습니다. 그런 다음 JavaScript에서는 파일을 반복하고 개별적으로 업로드하여 각 파일의 진행률 표시 줄을 업데이트해야합니다. 진행률 표시 줄에서 업로드 완료 백분율을 표시 할 수있는 방법은 무엇입니까?
   진행률 표시 줄에서 업로드 완료 비율을 표시하면 진행률 표시 줄 요소의 텍스트 내용을 업데이트하여 달성 할 수 있습니다. '이벤트 리스너. 로드 된 금액을 총 금액으로 나누고 100을 곱하여 백분율을 계산할 수 있습니다. 그런 다음이 값을 진행 막대 요소의 텍스트 내용으로 설정하십시오.

   파일 업로드 중에 내 진행률 표시 줄이 업데이트되지 않는 이유 ?

   파일 업로드 중에 진행률 표시 줄이 업데이트되지 않으면 몇 가지 이유가 발생할 수 있습니다. 한 가지 일반적인 이유는 '진행'이벤트 리스너가 올바르게 설정되지 않았기 때문입니다. 이벤트 리스너를 올바른 개체에 추가하고 이벤트 이름이 올바르게 철자를 추가했는지 확인하십시오. 또한 이벤트 리스너 내부의 코드가 진행률 표시 줄의 값 및 최대 속성을 올바르게 업데이트하고 있는지 확인하십시오.

   PHP 또는 Python과 같은 다른 프로그래밍 언어와 함께이 진행률 표시 줄을 사용할 수 있습니까?

   . 예, PHP 또는 Python과 같은 다른 프로그래밍 언어와 함께이 진행률 표시 줄을 사용할 수 있습니다. 진행률 표시 줄은 클라이언트 측 기술이며 모든 서버 측 기술과 상호 작용할 수있는 HTML 및 JavaScript를 사용하여 구현됩니다. 파일을 서버 측 스크립트로 보내려면 JavaScript 코드에서 Ajax 요청을 수정해야하며 서버 측 스크립트는 파일 업로드를 처리하고 진행 정보를 반환해야합니다. 진행률 표시 줄을 매끄럽게 만들어 주는가?

   진행률 표시 줄을 매끄럽게 만들려면 CSS 전환을 사용할 수 있습니다. CSS의 Progress Bar 요소에 '전환'속성을 추가하여 속성을 전환 (예 : 'width'), 전환 지속 시간 및 타이밍 기능 (예 : 'linear', 'ease-in'으로 지정합니다. , 'ease-out').

   파일 업로드 중에 오류를 처리 할 수있는 방법은 무엇입니까?

   파일 업로드 중 오류 처리는 '오류'이벤트 리스너에서 수행 할 수 있습니다. 이 이벤트는 업로드 중에 오류가 발생하면 발사됩니다. 이벤트 리스너에서는 사용자에게 오류 메시지를 표시하고 진행률 표시 줄을 재설정 할 수 있습니다.

   파일 업로드를 취소하고 진행률 표시 줄을 재설정 할 수 있습니까? 파일 업로드 및 진행률 표시 줄을 재설정하십시오. 파일 업로드를 취소하려면 xmlhttprequest 객체에서 'Abort'메소드를 호출 할 수 있습니다. 진행률 표시 줄을 재설정하려면 값 속성을 0으로 설정할 수 있습니다.
   업로드의 파일 크기를 제한하려면 어떻게해야합니까?
   업로드의 파일 크기 제한은 JavaScript 코드에서 수행 할 수 있습니다. AJAX 요청을 보내기 전에. 파일 객체의 '크기'속성에서 파일의 크기를 얻을 수 있고, 한계를 초과하면 오류 메시지를 표시하고 업로드를 중단합니다.

   . 파일 업로드뿐만 아니라 다른 유형의 AJAX 요청 에이 진행률 표시 줄을 사용할 수 있습니까?

   예, 파일 업로드뿐만 아니라 다른 유형의 AJAX 요청 에이 진행률 표시 줄을 사용할 수 있습니다. '진행'이벤트는 파일 업로드뿐만 아니라 모든 유형의 AJAX 요청에 대해 해고됩니다. 적절한 Ajax 요청을 보내려면 JavaScript 코드를 수정하고 요청의 진행 상황에 따라 진행률 표시 줄을 업데이트해야합니다.

위 내용은 HTML5 및 JavaScript에서 그래픽 파일 업로드 진행 막대를 업로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!