快捷導(dǎo)航

原生javascript實(shí)現(xiàn)文件異步上傳的實(shí)例講解

更新時間：2017年10月26日 08:28:35 作者：冷月葬殘花

下面小編就為大家?guī)硪黄鷍avascript實(shí)現(xiàn)文件異步上傳的實(shí)例講解。小編覺得挺不錯的，現(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實(shí)現(xiàn)文件異步上傳的實(shí)例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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