suchen

Heim >Web-Frontend >js-Tutorial >JavaScript-Methode zur Implementierung des asynchronen Datei-Uploads

JavaScript-Methode zur Implementierung des asynchronen Datei-Uploads

黄舟
黄舟Original
2017-10-26 09:41:481642Durchsuche

Der folgende Editor zeigt Ihnen ein Beispiel für die Implementierung des asynchronen Datei-Uploads mit nativem JavaScript. Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Kommen Sie und schauen Sie sich den Editor an

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>

Das obige ist der detaillierte Inhalt vonJavaScript-Methode zur Implementierung des asynchronen Datei-Uploads. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispielanalyse von Try Catch Finally in der JavaScript-AusnahmebehandlungNächster Artikel：Beispielanalyse von Try Catch Finally in der JavaScript-Ausnahmebehandlung

In Verbindung stehende Artikel

Mehr sehen