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
最后生成于 2022-11-21 22:22:32