使用原生ajax上传文件

2017年8月23日06:50:18 发表评论 已收录
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
 
<body>
  <h1>使用js原生ajax上传文件</h1>
  <form>
    <input type="file" id='file' name='myfile' multiple>
    <input type="submit" value='上传' id='btn'>
  </form>
  <img alt="">
</body>
</html>
<script>
  var oBtn = document.getElementById('btn');
  oBtn.onclick = function (e) {
    e.preventDefault();
    var oInput = document.getElementById('file');
    // 普通input的值是它的value属性的值
    // 但是 type = file 时,它的值就是这个dom对象的files属性的值
    var file = oInput.files[0]; // 选择的第一张图片
    var fd = new FormData();
    fd.append('myfile', file);
    var xhr = new XMLHttpRequest();
    xhr.open('post', 'http://test.huoqishi.net/upload');
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        document.querySelector('img').src = data.path;
      }
    }
    xhr.send(fd);
  }
</script>

 

weinxin
我的微信
爱生活、爱学习的小伙伴可以通过扫一扫二维码添加我的个人微信一起交流!
  • A+
所属分类:Ajax
青青子衿

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: