AJAX文件上传实践与分析,带HTML5文件上传API。

时间:2022-05-04 06:55:04

  对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的。

  网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可能实现的,因为浏览器的原因,AJAX根本获取不了文件信息,当然这里并不是说就不能文件上传了,只是说在AJAX2.0之前所谓的AJAX文件上传都是假冒的,核心更本没有用AJAX,而是利用iframe实现的,下面我们来看看如何利用iframe实现页面无刷新上传文件。

iframe无刷新上传文件版。

html:

<form action="http://127.0.0.1/index.php" method="POST" target="postFile" enctype="multipart/form-data">
  <input type="file" name="fs">
  <input type="submit" value="上传">
</form>
<iframe name="postFile" frameborder="0"></iframe>

php:

<?php
  if(empty($_FILES)){
    exit('空文件');
  }
  if($_FILES['fs']['error']!=0){
    exit('上传失败');
  }
  // 移动临时文件到a目录下
  move_uploaded_file($_FILES['fs']['tmp_name'],'a/'.$_FILES['fs']['name']);

  echo 'ok';
?>

效果:

AJAX文件上传实践与分析,带HTML5文件上传API。

可以看到页面并没有被刷新。

原理就是将form里面的数据提交到iframe框架里面。

给用户提示个正着上传比较好一些。

html:

<style>
#img{
display:none;
}
</style>

<form action="http://127.0.0.1/index.php" method="POST" target="postFile" enctype="multipart/form-data">
  <input type="file" name="fs">
  <input type="submit" value="上传">
</form>
<img src="loader.png" alt="" id="img">
<iframe name="postFile" frameborder="0"></iframe>
<script>
  var form = document.getElementsByTagName('form')[0];
  var img = document.getElementById('img');
  form.onsubmit = function(){
    img.style.display = 'block';
  };
</script>

php:

<?php
if(empty($_FILES)){
  exit('空文件');
}
if($_FILES['fs']['error']!=0){
  exit('上传失败');
}

// 移动临时文件到a目录下
move_uploaded_file($_FILES['fs']['tmp_name'],'a/'.$_FILES['fs']['name']);

// 文件上传成功以后将提示隐藏。

echo '<script>parent.document.getElementById("img").style.display="none";</script>';

echo 'ok';
?>

AJAX文件上传实践与分析,带HTML5文件上传API。

ok。不过这种方式虽然可以实现但多少有些不足,比如无法知道文件到底上传了多少。接下来介绍HTML5新增的API,非常强大。

html5新增了一个FormData对象,它可以用来操作表单。

例子1:上传文件

<form action="http://127.0.0.1/index.php" method="POST" enctype="multipart/form-data">
  <input type="file" name="fs">
  <input id="btn" type="button" value="上传">
</form>
<img src="loader.png" alt="" id="img">

<script>
var form = document.getElementsByTagName('form')[0];
var btn = document.getElementById('btn');
var img = document.getElementById('img');

btn.onclick = function(){
  var formData = new FormData(form);
  ajax(formData);

  img.style.display = 'block';
};

function ajax(data){
  var xhr = new XMLHttpRequest();
  xhr.open('POST','http://127.0.0.1/index.php');
  xhr.send(data);
  xhr.onreadystatechange = function(){
    if(this.readyState===4 && this.status===200){
      if(this.responseText==='1'){
        parent.document.getElementById("img").style.display="none";
        console.log('ok');
      }
    }
  };
}
</script>

直接把form表单传到FormData中就可以了,它内部会帮你处理。除了上传文件以外,FormData还有很多功能,比如之前我们提交表单还得一个一个操作表单的值,现在我们通过直接把form写进去的可以达到同样的效果,一起来看看。

AJAX文件上传实践与分析,带HTML5文件上传API。

和上传图片一样,就不贴代码了。

除了这个,FormData还允许你手动创建数据。

使用方法如下:

var formData = new FormData();
formData.append('sex','男');

AJAX文件上传实践与分析,带HTML5文件上传API。

不得不说这个方法还是很强大的,拥有这个方法我们可以干很多事。

关于文件的还新增了一个files属性,来看看。

AJAX文件上传实践与分析,带HTML5文件上传API。

通过files属性我们可以得到文件的大小以及文件名等,另外还可以将这个对象传到FormData里面当文件上传。

有了它我们还可以做图片预览功能噢,不过需要配合window.URL.createObjectURL来操作。

var f = document.getElementById('f').files[0];

var img = new Image();
img.src = window.URL.createObjectURL(f);
document.body.appendChild(img);

AJAX文件上传实践与分析,带HTML5文件上传API。

ok。

ajax2.0还新增了一下属性和事件,这里拿文件上传事件来讲。

有时候我们需要做文件上传进度条,那么我们就可以利用下面的这些方法。

ajax里面有一个upload属性,表示文件上传。里面还有一个文件上传中的事件onprogress

var xhr = new XMLHttpRequest();
xhr.open('POST','http://127.0.0.1/index.php');

xhr.upload.onprogress = function(e){
  console.log((e.loaded/e.total)*100);
};

xhr.onreadystatechange = function(){
 //xxxxx
};

xhr.send(data);

我们来打印一下这个事件里面都有什么东西。

xhr.upload.onprogress = function(e){
  console.log(e);
};

AJAX文件上传实践与分析,带HTML5文件上传API。

loaded:当前已上传的文件大小

total:文件总大小

我们通过(e.loaded/e.total)*100就可以算出它们的百分比来了。

AJAX文件上传实践与分析,带HTML5文件上传API。