使用原生ajax上传文件

2017年8月23日 评论
<!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
我的微信
爱生活、爱学习的小伙伴可以通过扫一扫二维码添加我的个人微信一起交流!
Ajax基本概念和原理 Ajax

Ajax基本概念和原理

什么是Ajax Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 Ajax的全称是Asynchronous JavaScript and XML,即异步JavaScript+X...
Ajax 实现滚动加载瀑布流 详解 Ajax

Ajax 实现滚动加载瀑布流 详解

/** * 需求: * 1、页面加载完成后 请求服务器 获取第一屏的数据 * 2、点击加载更多 请求服务器 获取下一屏的数据 * 3、当页面滚动到一定的高度时 请求服务器 获取下一屏的数据 渲染在页面...
匿名

发表评论

匿名网友