原生ajax+php上传图片效果

目的：利用ProgressEvents规范中的进度事件和php相结合实现图片格式的判断及上传。

前提理论：

有以下6个进度事件：

1.loadstart:在接收到响应数据的第一个字节时触发

2.progress:在接收响应期间持续不断地触

3.error:在请求发生错误时触发

4.abort:在因为调用abort()方法而终止连接时触发

5.load:在接收到完整的响应数据时触发

6.loadend:在通信完成或者触发error、abort或load事件后触发

我们先用PHP生成xml文件（注意xml的格式，xml格式要求相对严格，如果有错误则无法获取到xml响应内容），判断图片是否上传成功判断图片类型以及设置图片存放位置。

PHP代码：

<?php
$result=uploadImage($_FILES['image']);
header('Content-type:text/xml');
echo '<?xml version="1.0" encoding="utf-8" ?>';
echo '<result>'.$result.'</result>';
function uploadImage($file){
//判断是否上传成功
if($file['error']>0){
return '<flag>error</flag><message>php1上传失败</message>';
}
//获取上传文件的类型
$type=strchr($file['name'],'.');
if($type!='.jpg'){
return '<flag>error</flag><message>上传失败，只允许jpg扩展名</message>';

}
$filename=substr(uniqid(rand()),-6).'.jpg';
//上传文件保存路径
$filepath='./uploads/'.$filename;
if(move_uploaded_file($file['tmp_name'],$filepath)){
return '<flag>ok</flag><message>'.$filepath.'</message>';
}else{
return '<flag>error</flag><message>php上传失败</message>';
}
}
?>

JS发送文件内容，在浏览器接收数据期间周期性地触发进度事件。获取响应数据，计算上传速度上传时间。

JS代码：

var xhr;
var ot;
var oloaded;
var form=document.getElementById("form");
var progressBar = document.getElementById("progressBar");
var percentageDiv = document.getElementById("percentage");
var contentBar=document.getElementById("content-bar");
//上传文件方法
function UpladFile() {
var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
var url = "good.php";
var fd = new FormData(form);             // FormData 对象
//form.append("mf", fileObj); // 文件对象
xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
xhr.open("post", url);
xhr.onreadystatechange = function() {
if(xhr.readyState==4&&xhr.status==200){
console.log(xhr.responseXML);
var rptest=xhr.responseXML;
var flag=rptest.getElementsByTagName("flag")[0].childNodes[0].nodeValue;
var message=rptest.getElementsByTagName("message")[0].childNodes[0].nodeValue;
if(flag=="ok"){
var image=document.getElementById("image");
image.src=message;
xhr.onload = uploadComplete;               //请求完成
contentBar.style.display="block";
}
if(flag=="error"){
alert("上传失败,仅上传jpg格式图片");
contentBar.style.display="none";
}
}
}
xhr.upload.onprogress = progressFunction;
xhr.upload.onloadstart = function(){          //上传开始执行方法
ot = new Date().getTime();           //设置上传开始时间
oloaded = 0;                   //设置上传开始时，以上传的文件大小为0
};
xhr.send(fd);
}
//上传进度实现方法，上传过程中会频繁调用该方法
function progressFunction(evt) {
if (evt.lengthComputable) {
progressBar.max = evt.total;
progressBar.value = evt.loaded;
percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
}
var time = document.getElementById("time");
var nt = new Date().getTime();                  //获取当前时间
var pertime = (nt-ot)/1000;
ot = new Date().getTime();                    //重新赋值时间，用于下次计算

var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b
oloaded = evt.loaded;
//上传速度计算
var speed = perload/pertime;//单位b/s
var bspeed = speed;
var units = 'b/s';//单位名称
if(speed/1024>1){
speed = speed/1024;
units = 'k/s';
}
if(speed/1024>1){
speed = speed/1024;
units = 'M/s';
}
speed = speed.toFixed(1);
//剩余时间
var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1);
time.innerHTML = '，速度：'+speed+units+'，剩余时间：'+resttime+'s';
if(bspeed==0){
time.innerHTML = '上传已取消';
}
if(resttime=="0.0"){
contentBar.style.display="none";
}

}
function uploadComplete(evt) {
alert("上传成功！");
}
//取消上传
function cancleUploadFile(){
xhr.abort();
}

效果：