여러 파일 드래그 앤 드롭 업로드 및 진행률 표시 줄 업로드에 대한 자습서의 코드를 결합 하여 여러 파일 드래그 앤 드롭 업로드 에 대한 진행률 표시 줄을 만들려고 합니다.
자바 스크립트 부분은 다음과 같습니다.
var dropzone = document.getElementById("dropzone");
function updateProgress(e){
document.getElementById("progress").innerHTML = e.loaded + " of " + e.total;
}
function upload(files){
var formData = new FormData(),
xhr = new XMLHttpRequest(),
x;
for(x = 0; x < files.length; x++){
formData.append("file[]", files[x]);
}
xhr.addEventListener("progress", updateProgress, false);
xhr.open("post", "upload.php");
xhr.send(formData);
}
dropzone.ondrop = function(e){
e.preventDefault();
this.className = "dropzone";
upload(e.dataTransfer.files);
}
dropzone.ondragover = function(){
this.className = "dropzone dragover";
return false;
}
dropzone.ondragleave = function(){
this.className = "dropzone";
return false;
}
그리고 upload.php간단합니다.
<?php
if(!empty($_FILES["file"]["name"][0]))
foreach($_FILES["file"]["name"] as $position => $name)
move_uploaded_file($_FILES["file"]["tmp_name"][$position], "uploads/".$name);
?>
먼저 실제 진행률 표시 줄을 만들기 전에 업로드 된 총 바이트 수를 표시하고 싶습니다. 그러나 기능은 updateProgress경우 호출되지 않습니다 upload.php에코 아무것도 그렇지 않으면 (예를 들어 내가 추가하는 경우 echo "something";) e.loaded및 e.total파일 크기와 관련이없는 같은 값의 작은 숫자 없습니다.
파일 업로드 자체는 대용량 파일 (수백 MB)에서도 잘 작동합니다. 대용량 파일의 updateProgress경우 업로드가 완료된 후 함수 가 한 번만 호출되는 것을 확인했습니다 .
이 이벤트 처리가 이와 같이 작동하는 이유와 해결 방법은 무엇입니까?
다운로드 용 진행 처리기를 설정하고 업로드 용으로 설정합니다.
xhr.upload.addEventListener("progress", updateProgress, false);
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다