原生javascript實(shí)現(xiàn)文件異步上傳的實(shí)例講解
效果圖:
代碼:(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í)例講解就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- JQuery插件ajaxfileupload.js異步上傳文件實(shí)例
- asp.net+ajaxfileupload.js 實(shí)現(xiàn)文件異步上傳代碼分享
- JavaScript中三種異步上傳文件方式
- asp.net+jquery.form實(shí)現(xiàn)圖片異步上傳的方法(附j(luò)query.form.js下載)
- JS實(shí)現(xiàn)異步上傳壓縮圖片
- angularjs中$http異步上傳Excel文件方法
- js異步上傳多張圖片插件的使用方法
- JavaScript異步上傳圖片文件的實(shí)例代碼
- AjaxFileUpload.js實(shí)現(xiàn)異步上傳文件功能
相關(guān)文章
js父窗口關(guān)閉時(shí)子窗口隨之關(guān)閉完美解決方案
admin注銷的時(shí)候,或者main.html關(guān)閉的時(shí)候,如何讓打開的所有新窗口一起關(guān)閉,下面有個(gè)不錯(cuò)的解決方案,大家可以參考下2014-04-04javascript算法解數(shù)獨(dú)實(shí)現(xiàn)方案示例
這篇文章主要為大家介紹了javascript算法解數(shù)獨(dú)實(shí)現(xiàn)方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08強(qiáng)大的JavaScript響應(yīng)式圖表Chartist.js的使用
本篇文章主要介紹了強(qiáng)大的JavaScript響應(yīng)式圖表Chartist.js的使用,具有一定的參考價(jià)值,有興趣的可以了解一下2017-09-09javascript定義變量時(shí)帶var與不帶var的區(qū)別分析
這篇文章主要介紹了javascript定義變量時(shí)帶var與不帶var的區(qū)別,以一個(gè)簡(jiǎn)單實(shí)例分析了變量定義時(shí)帶var與不帶var的執(zhí)行原理及用法區(qū)別,需要的朋友可以參考下2015-01-01詳解javascript腳本何時(shí)會(huì)被執(zhí)行
這篇文章主要介紹了詳解javascript腳本何時(shí)會(huì)被執(zhí)行,幫助大家更好的理解和使用JavaScript,感興趣的朋友可以了解下2021-02-02javascript:FF/Chrome與IE動(dòng)態(tài)加載元素的區(qū)別說(shuō)明
今天在寫一段js時(shí),發(fā)現(xiàn)IE與FF在動(dòng)態(tài)加載Html元素時(shí),有一些差別,一起過(guò)來(lái)看看下面的代碼吧2014-01-01