原生javascript实现文件异步上传的实例讲解

2019-11-19 15:04:43

字体：大中小

来源：转载

供稿：网友

效果图：

代码：（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>

以上这篇原生javascript实现文件异步上传的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：基于Require.js使用方法(总结)

下一篇：详解开源的JavaScript插件化框架MinimaJS