JavaScript实现文件异步上传的方法-js教程-PHP中文网

JavaScript实现文件异步上传的方法

黄舟

发布： 2017-10-26 09:41:48

原创

1833人浏览过

下面小编就为大家带来一篇原生javascript实现文件异步上传的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

效果图：

代码：（demo33.jsp）

PHP、MySQL和Apache的学习

PHP是程式语言、MySQL是资料库，要学好任何一种都不是件容易的事，而我们，还要将它做出成果出来！很难吗？不会的！有好的方法、好的流程，其实是可以很轻松的学会，并且应用在网页上的。书里所介绍的是观念、流程，一个步骤一个步骤依照需求，就可以做出我们要的结果，不怕做不出来，希望藉由这本书，可以让你将这些观念实现在你的网站里。 PHP & MySQL的学习，只要有正确的观念、正确

442

查看详情

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>demo33.jsp</title>
</head>
<body>
<label for="text">名称</label>
<input type="text" id="text" name="name"/>
<label for="file">文件</label>
<input type="file" id="file" name="file"/>
<button type="button" onclick="ajaxUploadFile()">确定</button>
</body>
<script type="text/javascript">
 function ajaxUploadFile() {
  var formData = new FormData();
  var xmlhttp;
  if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp = new XMLHttpRequest();
  }else {// code for IE6, IE5
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.open("POST","/data",true);
  xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
  formData.append("name",document.getElementById("text").value);
  formData.append("file",document.getElementById("file").files[0]);
  xmlhttp.send(formData);
  xmlhttp.onreadystatechange=function() {
   if (xmlhttp.readyState==4) {
    if (xmlhttp.status==200) {
     console.log("上传成功"+xmlhttp.responseText);
    }else {
     console.log("上传失败"+xmlhttp.responseText);
    }
   }
  }
 }
</script>
</html>

登录后复制

以上就是JavaScript实现文件异步上传的方法的详细内容，更多请关注php中文网其它相关文章！