JavaScript new XMLHttpRequest() 上传文件显示进度条

https://zinoui.com/blog/ajax-request-progress-bar

js代码

<template>
  <div style="padding:20px">
    <input ref="file" id="file" type="file" @change="change">

    <div>上传文件</div>
    <progress id="progress" value="" max=""></progress>
    <div id="progressBar_value"></div>
    <div id="progressBar_max"></div>
  </div>
</template>

<script>

export default {
  methods: {

    change(input) {
      let file = input.currentTarget;
      this.upload(file.files[0])
    },

    upload(file) {
      const formData = new FormData();
      formData.append("file", file);

      const progressBar = document.getElementById("progress")
      const progressBar_value = document.getElementById("progressBar_value");
      const progressBar_max = document.getElementById("progressBar_max");

      const xhr = new XMLHttpRequest();
      xhr.open("POST", "/good4/test/upload.php", true);
      xhr.upload.onprogress = function (e) {
        if (e.lengthComputable) {
          progressBar.max = e.total;
          progressBar.value = e.loaded;
          progressBar_value.innerHTML = `${(e.loaded / 1024 / 1024).toFixed(3)}MB`;
          progressBar_max.innerHTML = `${(e.total / 1024 / 1024).toFixed(3)}MB`;
        }
      }
      xhr.upload.onloadstart = function (e) {
        progressBar.value = 0;
      }
      xhr.upload.onloadend = function (e) {
        progressBar.value = e.loaded;
      }
      xhr.send(formData);
    }
  }
}
</script>

服务器代码

<?PHP
move_uploaded_file($_FILES["file"]["tmp_name"], "log/".$_FILES["file"]["name"])
?>

PHP编程语言中的常见的$_FILES系统函数用法有：

• $_FILES['myFile']['name'] 显示客户端文件的原名称。
• $_FILES['myFile']['type'] 文件的 MIME 类型，例如"image/gif"。
• $_FILES['myFile']['size'] 已上传文件的大小，单位为字节。
• $_FILES['myFile']['tmp_name'] 储存的临时文件名，一般是系统默认。
• $_FILES["file"]["error"]是错误代码，0表示没有错误，下面几种对应不同的错误：
• • 0、文件上传成功。
• • 1、超过了文件大小php.ini中即系统设定的大小。
• • 2、超过了文件大小，MAX_FILE_SIZE 选项指定的值。
• • 3、文件只有部分被上传。
• • 4、没有文件被上传。
• • 5、上传文件大小为0。

php.ini 配置上传文件功能示例

• 假设要上传一个50M的大文件。配置 php.ini 如下：
• • file_uploads = On
• • upload_tmp_dir = "d:/fileuploadtmp"
• • upload_max_filesize = 50M
• • post_max_size = 100M
• • max_execution_time = 600
• • max_input_time = 600
• • memory_limit = 128M