Detaillierte Erläuterung der JavaScript-Implementierung der asynchronen Datei-Upload-Funktion-js-Tutorial-php.cn

Detaillierte Erläuterung der JavaScript-Implementierung der asynchronen Datei-Upload-Funktion

小云云

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

Original

1496 Leute haben es durchsucht

Dieser Artikel enthält hauptsächlich 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. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

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>

Nach dem Login kopieren

Verwandte Empfehlungen:

Detaillierte Erläuterung des Formular-Uploads zur Implementierung des asynchronen Datei-Uploads mit Ajax

Native js zur Implementierung Methode zum asynchronen Datei-Upload

JavaScript-Methode zur Implementierung des asynchronen Datei-Uploads

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der JavaScript-Implementierung der asynchronen Datei-Upload-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!