HLJ 发布于
2022-10-02 14:12:29

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
当前文章内容为原创转载请注明出处:http://www.good1230.com/detail/2022-10-02/607.html
最后生成于 2022-11-21 22:22:32