大文件上传进度条实现
1.FormData对象提交表单
进行表单提交时，如果表单当中的域很多，使用DOM操作就比较麻烦。FormData可以一次性收集表单中的所有数据，包括文件域的数据，操作更方便。
2.调整允许上传文件大小
修改php.ini文件中允许POST表单上传的最大数据量：
修改php.ini文件中允许上传文件的最大大小：
3.onprogress事件
onprogress事件是 XMLHttpRequest的子对象XMLHttpRequestUpload中的一个事件，该事件大约每100ms向客户端返回一次数据，该数据中包含文件已上传大小loaded和总大小total。
xhr.upload.onprogress = function(evt){
console.log(evt); //evt是onprogress事件的对象
}4.进度条实现实例
前台HTML页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 外层div 进度条的整体视觉和位置设置 -->
<div style="width:300px;height: 20px;border: 1px solid #CCC">
<!-- 内层div 逐渐递增的进度条 -->
<div id="jdt" style="height: 20px"></div>
</div><br>
<form action="" method="post" id="mainForm">
选择文件：
<input type="file" name="f">
<input type="button" value="上传" onclick="upload()">
</form>
<script type="text/javascript">
function upload(){
// 获取表单对象
var fm = document.getElementById("mainForm");
// 实例化FormData对象
var fd = new FormData(fm);
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// console.log(xhr);
// 调用open方法准备ajax请求
xhr.open('post','upfile.php');
var jdt = document.getElementById('jdt');
// 绑定onprogress事件
xhr.upload.onprogress = function(evt){
// console.log(evt);
// toFixed修正结果，只保留小数点后两位
// 计算上传大小的百分比
percent = (evt.loaded / evt.total).toFixed(2);
// 设置进度条样式
jdt.style.width = percent * 300 + 'px';
jdt.style.background = 'skyblue';
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
// 发送ajax请求
xhr.send(fd);
}
</script>
</body>
</html> 后台PHP程序:
<?php
if($_FILES['f']['error'] ==0 ){
// echo $_FILES['f']['name'];
// 将$_FILES['f']['name']字符串由参数1的字符集，转为参数2的字符集
$name = iconv('utf-8','gb2312',$_FILES['f']['name']);
// 如果不进行转换的话，中文会产生乱码。因为我们的程序用的是utf-8，而windows系统用的是gb2312
//参数1: 临时存放路径
//参数2: 永久保存路径
if(move_uploaded_file($_FILES['f']['tmp_name'],$name)){
echo "上传成功";
}else{
echo "上传失败";
}
}else{
echo "上传出错";
}大文件上传进度条实现
1.FormData对象提交表单
进行表单提交时，如果表单当中的域很多，使用DOM操作就比较麻烦。FormData可以一次性收集表单中的所有数据，包括文件域的数据，操作更方便。
2.调整允许上传文件大小
修改php.ini文件中允许POST表单上传的最大数据量：
修改php.ini文件中允许上传文件的最大大小：
3.onprogress事件
onprogress事件是 XMLHttpRequest的子对象XMLHttpRequestUpload中的一个事件，该事件大约每100ms向客户端返回一次数据，该数据中包含文件已上传大小loaded和总大小total。
xhr.upload.onprogress = function(evt){
console.log(evt); //evt是onprogress事件的对象
}4.进度条实现实例
前台HTML页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 外层div 进度条的整体视觉和位置设置 -->
<div style="width:300px;height: 20px;border: 1px solid #CCC">
<!-- 内层div 逐渐递增的进度条 -->
<div id="jdt" style="height: 20px"></div>
</div><br>
<form action="" method="post" id="mainForm">
选择文件：
<input type="file" name="f">
<input type="button" value="上传" onclick="upload()">
</form>
<script type="text/javascript">
function upload(){
// 获取表单对象
var fm = document.getElementById("mainForm");
// 实例化FormData对象
var fd = new FormData(fm);
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// console.log(xhr);
// 调用open方法准备ajax请求
xhr.open('post','upfile.php');
var jdt = document.getElementById('jdt');
// 绑定onprogress事件
xhr.upload.onprogress = function(evt){
// console.log(evt);
// toFixed修正结果，只保留小数点后两位
// 计算上传大小的百分比
percent = (evt.loaded / evt.total).toFixed(2);
// 设置进度条样式
jdt.style.width = percent * 300 + 'px';
jdt.style.background = 'skyblue';
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
// 发送ajax请求
xhr.send(fd);
}
</script>
</body>
</html> 后台PHP程序:
<?php
if($_FILES['f']['error'] ==0 ){
// echo $_FILES['f']['name'];
// 将$_FILES['f']['name']字符串由参数1的字符集，转为参数2的字符集
$name = iconv('utf-8','gb2312',$_FILES['f']['name']);
// 如果不进行转换的话，中文会产生乱码。因为我们的程序用的是utf-8，而windows系统用的是gb2312
//参数1: 临时存放路径
//参数2: 永久保存路径
if(move_uploaded_file($_FILES['f']['tmp_name'],$name)){
echo "上传成功";
}else{
echo "上传失败";
}
}else{
echo "上传出错";
}