首頁 >web前端 >js教程 >javascript實作檔案非同步上傳功能詳解

javascript實作檔案非同步上傳功能詳解

小云云原創: 2018-01-02 16:10:081542瀏覽

本文主要為大家帶來一篇原生javascript實作檔案非同步上傳的實例講解。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

效果圖：

#程式碼：（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>

###相關推薦：########詳解表單上傳實作ajax檔案異步上傳############原生js實作檔案異步上傳的方法# ###########JavaScript實作檔案非同步上傳的方法######

以上是javascript實作檔案非同步上傳功能詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript ajax JS 异步

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：Require.js使用方法分享下一篇：Require.js使用方法分享

看更多