집 >백엔드 개발 >PHP 튜토리얼 >PHP+ajax는 파일 업로드 진행률 표시줄 효과 샘플 코드를 구현합니다.

PHP+ajax는 파일 업로드 진행률 표시줄 효과 샘플 코드를 구현합니다.

怪我咯원래의: 2017-07-23 11:00:221605검색

진행률 표시줄은 컴퓨터가 작업을 처리할 때 작업 속도, 완료 정도, 완료되지 않은 남은 작업 크기, 처리 가능한 시간을 실시간으로 그림 형식으로 표시하는 것을 의미합니다. 일반적으로 직사각형 막대 모양으로 표시됩니다. 이 글은 주로 PHP Ajax에서 파일 업로드 진행률 표시줄을 구현하는 방법에 대한 정보를 소개합니다. 필요한 친구가 참고할 수 있습니다. 이 예제는 PHP 파일 업로드 시 진행률 표시줄 구현에 대한 것입니다. 기술이 필요하고 HTML5도 사용합니다. 도움이 필요한 친구들이 이를 연구할 수 있습니다.

이 예제에는 두 개의 파일이 있습니다.

upload_form.html:

<!DOCTYPE html>
<html>
<head>
<script>
function _(el){
  return document.getElementById(el);
}
function uploadFile(){
  var file = _("file1").files[0];
  // alert(file.name+" | "+file.size+" | "+file.type);
  var formdata = new FormData();
  formdata.append("file1", file);
  var ajax = new XMLHttpRequest();
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  ajax.addEventListener("error", errorHandler, false);
  ajax.addEventListener("abort", abortHandler, false);
  ajax.open("POST", "file_upload_parser.php");
  ajax.send(formdata);
}

function progressHandler(event){
  _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
  var percent = (event.loaded / event.total) * 100;
  _("progressBar").value = Math.round(percent);
  _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}

function completeHandler(event){
  _("status").innerHTML = event.target.responseText;
  _("progressBar").value = 0;
}

function errorHandler(event){
  _("status").innerHTML = "Upload Failed";
}

function abortHandler(event){
  _("status").innerHTML = "Upload Aborted";
}
</script>
</head>
<body>
<h2>HTML5 File Upload Progress Bar Tutorial</h2>
<form id="upload_form" enctype="multipart/form-data" method="post">
 <input type="file" name="file1" id="file1"><br>
 <input type="button" value="Upload File" onclick="uploadFile()">
 <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
 <h3 id="status"></h3>
 <p id="loaded_n_total"></p>
</form>
</body>
</html>

file_upload_parser.php:

<?php
$fileName = $_FILES["file1"]["name"]; // The file name
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["file1"]["type"]; // The type of file it is
$fileSize = $_FILES["file1"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true
if (!$fileTmpLoc) { // if file not chosen
  echo "ERROR: Please browse for a file before clicking the upload button.";
  exit();
}
if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){
  echo "$fileName upload is complete";
} else {
  echo "move_uploaded_file function failed";
}
?>

위 내용은 PHP+ajax는 파일 업로드 진행률 표시줄 효과 샘플 코드를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：PHP 코드로 구현된 진행 표시줄다음 기사：PHP 코드로 구현된 진행 표시줄