Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der JavaScript-Implementierung der asynchronen Datei-Upload-Funktion
Detaillierte Erläuterung der JavaScript-Implementierung der asynchronen Datei-Upload-Funktion
- 小云云Original
- 2018-01-02 16:10:081437Durchsuche
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>Verwandte Empfehlungen:
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!