JavaScript異步上傳圖片文件的實例代碼
更新時間：2017年07月04日 12:06:37 作者：小太陽Sunny
本文通過實例代碼給大家介紹了js異步上傳圖片文件的方法，包括html和jquery代碼，需要的的朋友參考下吧
html：
<form action="url" enctype="multipart/form-data" id="myform" method="post">
<input accept="image/*" id="addfile" type="file" />
</form>
jquery：
$("#addfile").on('change', function () {
var f = $(this).get(0).files[0];
var form = document.getElementById('myform');
var formData = new FormData(form);
formData.append('Filedata', f);
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.open('POST', form.action);
xhr.send(formData);
});
function uploadComplete(evt)
{
var data=evt.target.responseText
}
function uploadFailed()
{
alert("上傳失??！請重試！");
}
以上所述是小編給大家介紹的JavaScript異步上傳圖片文件的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
TypeScript中import?type與import的區(qū)別詳析
ES6引入了模塊化,其設(shè)計思想是在編譯時就能確定模塊的依賴關(guān)系,以及輸入和輸出的變量,下面這篇文章主要給大家介紹了關(guān)于TypeScript中import?type與import區(qū)別的相關(guān)資料,需要的朋友可以參考下2022-07-07
JavaScript 是一門基于原型的語言,它的繼承機制與傳統(tǒng)的基于類的面向?qū)ο缶幊逃兴煌?盡管 ES6 引入了 class 語法,但本質(zhì)上仍然是基于原型鏈的繼承,本文將詳細介紹 JavaScript 繼承的幾種實現(xiàn)方式,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了JS開發(fā)常用工具函數(shù)2019-07-07
實現(xiàn)一個五子棋游戲, 簡要分析其原理, 頁面并沒有很花哨, 原理搞懂了, 后面的就是很輕松的事了,本文給大家介紹了如何用純JS實現(xiàn)一個五子棋游戲,文中通過代碼示例給大家介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細介紹了JavaScript如何利用SpeechSynthesis實現(xiàn)文字轉(zhuǎn)語音即文本朗讀的功能,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
移動端左右滑動切換頁面效果完整代碼(純JavaScript)
這篇文章主要介紹了如何通過原生JavaScript實現(xiàn)移動端左右滑動效果,并結(jié)合tab切換卡功能,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了JS彈出層的絕對定位居中是如何實現(xiàn)的,需要的朋友可以參考下2014-02-02
本文將結(jié)合實例代碼，介紹Bootstrap5的斷點與容器的具體使用，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
這篇文章主要為大家介紹了一文搞懂?parseInt()函數(shù)異常行為示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
javascript中的緩動效果可以應(yīng)用于很多地方，比如距離位移上的變化：圖片的滾動、焦點圖的輪轉(zhuǎn)切換，透明度上的變化：漸隱漸現(xiàn)。凡是存在運動的狀態(tài)都適用，下面以最基本的塊在容器內(nèi)從左到右滑動為例，講下幾種不同的緩動處理方式2012-12-12