Detailed explanation of JavaScript's implementation of asynchronous file upload function-JS Tutorial-php.cn

Detailed explanation of JavaScript's implementation of asynchronous file upload function

小云云

Release： 2018-01-02 16:10:08

Original

1540 people have browsed it

This article mainly brings you an example of how to implement asynchronous file upload using native JavaScript. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Rendering:

Code: (demo33.jsp)

<%@ 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>

Copy after login

Related recommendations:

Detailed explanation of form upload to implement asynchronous file upload with ajax

How to implement asynchronous file upload with native js

JavaScript method to implement asynchronous file upload

The above is the detailed content of Detailed explanation of JavaScript's implementation of asynchronous file upload function. For more information, please follow other related articles on the PHP Chinese website!