原生javascript實現(xiàn)文件異步上傳的實例講解
更新時間：2017年10月26日 08:28:35 作者：冷月葬殘花
下面小編就為大家?guī)硪黄鷍avascript實現(xiàn)文件異步上傳的實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
效果圖：
代碼：（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實現(xiàn)文件異步上傳的實例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天移動端正好需要圖片觸摸滑動效果實現(xiàn)代碼，基于swiper實現(xiàn),需要的朋友可以參考下2018-05-05
通過js動態(tài)操作table(新增，刪除相關(guān)列信息)
通過js動態(tài)操作table(新增，刪除相關(guān)列信息)的實現(xiàn)代碼，需要的朋友可以參考下2012-05-05
Bootstrap開關(guān)(switch)控件學(xué)習(xí)筆記分享
這篇文章主要為大家分享了Bootstrap開關(guān)(switch)控件學(xué)習(xí)筆記，介紹了Bootstrap開關(guān)(switch)控件的功能、使用說明，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要為大家詳細介紹了JavaScript運動框架第四部分，多值運動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
JavaScript 解決ajax中parsererror錯誤案例詳解
這篇文章主要介紹了JavaScript 解決ajax中parsererror錯誤案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了BootStrap中的表單大全,包括基礎(chǔ)表單，內(nèi)聯(lián)表單和水平表單等知識，本文介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
在Web開發(fā)中,處理圖片、字體等資源文件是一個常見的需求,傳統(tǒng)的做法是將這些資源文件放在靜態(tài)目錄中,然后在HTML或CSS中引用,然而,這種方法在構(gòu)建工具（如Webpack）中并不總是最理想的,為了解決這個問題,可以使用url-loader,需要的朋友可以參考下2025-04-04
本文主要介紹了webpack中的代理配置詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
本文章來給大家介紹一個javascript中向左滾動文字效果。有需要使用的朋友可參考，這里面我們需要注意下面的css必須強制white-space:nowrap;overflow:hidden;不換行才行哦2013-08-08
這篇文章主要給大家介紹了關(guān)于ES6入門教程之Array.from()方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用ES6具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03