JS上传文件时显示进度条
这次给大家带来JS上传文件时显示进度条，JS上传文件时显示进度条的注意事项有哪些，下面就是实战案例，一起来看一下。
在php.ini修改需要的大小：
upload_max_filesize = 8M
post_max_size = 10M
memory_limit = 20M
<!DOCTYPE html>
<html>
<head>
<title>原生JS大文件显示进度条</title>
<meta charset="UTF-8">
<style type="text/css">
#parent{position: relative;width: 500px;height:20px;border:1px solid #ccc;display: none;border-radius:20px}
#child{position: absolute;width:0%;height:20px;background: #5FB878;display: none;line-height: 20px;color: #ffffff;font-size: 12px;border-radius:20px}
</style>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<form action="" method="post">
<p id="parent">
<p id="child"></p>
</p>
<p>上传文件:<input type="file" name="file"></p>
<p><input type="submit" value="提交" id="submit"></p>
</form>
<script type="text/javascript">
var oForm = document.getElementsByTagName('form')[0];
var oSubmit = $('submit');
//如果多个人同时提交这个表单的时候，由于是异步的请求，互不影响
oSubmit.onclick = function(){
try{
var xhr = new XMLHttpRequest();
}catch(e){
var xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
xhr.upload.onprogress = function(e){
var ev = e || window.event;
var percent = Math.floor((ev.loaded / ev.total)*100);
// console.log(percent);
//将百分比显示到进度条
$('parent').style.display = 'block';
$('child').style.display = 'block';
//将上传进度的百分比显示到child里面
$('child').style.width = percent+'%';
$('child').style.textAlign = 'center';
$('child').innerHTML = percent+'%';
//判断如果百分比到达100%时候，隐藏掉
if(percent==100){
$('parent').style.display = 'none';
$('child').style.display = 'none';
}
}
xhr.open('post','progress.php',true);
var form = new FormData(oForm);
xhr.send(form);
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
eval("var obj ="+xhr.responseText);
if(obj.status){
alert('上传成功');
}else{
alert('上传失败');
}
}
}
//阻止表单提交
return false;
}
</script>
</body>
</html><?php
//开始上传
//注意：文件是windows系统的文件，采用的gbk编码，php文件使用的是utf-8编码
//我们不能直接修改文件的编码，只能临时修改一下php的编码
$dst_file = $_FILES['file']['name'];
$dst_file = iconv('utf-8', 'gbk', $dst_file);
if(move_uploaded_file($_FILES['file']['tmp_name'],$dst_file)){
$data['status'] = 1;
}else{
$data['status'] = 0;
}
echo json_encode($data);相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是JS上传文件时显示进度条的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
WebSocket与JavaScript：实现实时监控系统的关键技术
Dec 17, 2023 pm 05:30 PM
WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技
桌面布局已锁定的原因及解决方法
Feb 19, 2024 pm 06:08 PM
显示桌面布局已锁定是怎么回事在使用计算机的过程中，有时我们可能会遇到显示桌面布局已锁定的情况。这个问题意味着我们无法自由地调整桌面图标的位置或改变桌面背景等操作。那么，显示桌面布局已锁定到底是怎么回事呢？一、理解桌面布局和锁定功能首先，我们需要了解桌面布局和桌面锁定这两个概念。桌面布局是指桌面上各个元素的排列方式，包括快捷方式、文件夹和小部件等。我们可以自由
如何让远程桌面连接显示对方的任务栏
Jan 03, 2024 pm 12:49 PM
远程桌面连接使用的用户非常多，很多用户在使用的时候都会遇到些小问题，比如没有显示对方的任务栏，其实很可能是对方的设置问题，下面就来看看解决方法吧。远程桌面连接怎么显示对方的任务栏：1、首先点击“设置”。2、然后再打开“个性化”。3、随后选择左侧的“任务栏”4、将图中隐藏任务栏选项关闭即可。
简易JavaScript教程：获取HTTP状态码的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest
Linux 中如何查看当前目录？
Feb 23, 2024 pm 05:54 PM
在Linux系统中，要显示当前路径可以使用pwd命令。pwd命令是PrintWorkingDirectory的缩写，用于显示当前工作目录的路径。在终端中输入以下命令即可显示当前路径：pwd执行该命令后，终端会显示当前工作目录的完整路径，如：/home/user/Documents。另外，还可以使用一些其他选项来增强pwd命令的功能，例如-P选项可以显示出
怎么显示wifi密码二维码 推荐无线密码微信扫一扫3秒搞定
Feb 20, 2024 pm 01:42 PM
WIFI密码不用经常输入，所以忘记了也很正常，今天我教大家一个最简单的方法来查到自己家WIFI的密码，3秒搞定。WIFI密码那就是用微信的扫一扫来查看，本方法的前提是：要有一台手机能连上过WIFI。好了，下面开始操作教程：步骤1、我们进入手机，从手机顶部下拉，调出状态栏，WIFI图标步骤2、长按WIFI图标，进入WLAN设置；长按WIFI图标步骤3、点击已经连接上的自己家的WIFI名称，点击分享密码，它会弹出来二维码；分享WIFI密码步骤4、我们截图保存此二维码；步骤5、桌面长按微信图标，点击扫
三星将为微软 MR 头显提供显示屏 设备有望更轻便显示更清晰
Aug 10, 2024 pm 09:45 PM
近日，三星显示(SamsungDisplay)与微软公司签署了一项重要合作协议。根据协议，三星显示将为微软开发和供应数十万台适用于混合现实(MR)头显设备的OLEDoS面板，而微软正开发一款面向游戏和电影等多媒体内容的MR设备，这款设备预计将在OLEDoS规格确定后推出，主要服务于商用领域，预计最早于2026年交付。OLEDoS（OLEDonSilicon）技术OLEDoS是一种新型显示屏技术，将OLED沉积在硅基板上，相较于传统的玻璃基板，具有更薄、像素更高的特点。OLEDoS显示屏与普通显示
win7无法正常关机一直显示正在关闭
Jan 06, 2024 pm 07:41 PM
win7系统是一款被大多数电脑使用者都喜欢的优秀系统。但是最近有很多的win7系统用户们反应自己的电脑出现了无法关机一直显示正在关机的故障！今天小编就为大家带来了win7无法关机的解决办法一起来看看吧。win7无法关机一直显示正在关机的解决办法：各种原因及解决办法：方法一：1、先查看一下有没有未关闭的软件，如果有将其退出，再尝试重新关机2、点击关机命令后依然无法关机，有很大可能性是由于电脑中存在进程的干扰，在任务栏上右击鼠标，点击“任务管理器”，选择“进程”。3、在进程中可以观察到电脑运行的所有
