JavaScript異步上傳圖片文件的實(shí)例代碼

更新時(shí)間：2017年07月04日 12:06:37 作者：小太陽(yáng)Sunny

本文通過(guò)實(shí)例代碼給大家介紹了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("上傳失??！請(qǐng)重試！"); 
}

以上所述是小編給大家介紹的JavaScript異步上傳圖片文件的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

TypeScript中import?type與import的區(qū)別詳析
ES6引入了模塊化,其設(shè)計(jì)思想是在編譯時(shí)就能確定模塊的依賴關(guān)系,以及輸入和輸出的變量,下面這篇文章主要給大家介紹了關(guān)于TypeScript中import?type與import區(qū)別的相關(guān)資料,需要的朋友可以參考下
2022-07-07
JavaScript繼承的實(shí)現(xiàn)方式詳解
JavaScript 是一門(mén)基于原型的語(yǔ)言,它的繼承機(jī)制與傳統(tǒng)的基于類(lèi)的面向?qū)ο缶幊逃兴煌?盡管 ES6 引入了 class 語(yǔ)法,但本質(zhì)上仍然是基于原型鏈的繼承,本文將詳細(xì)介紹 JavaScript 繼承的幾種實(shí)現(xiàn)方式,需要的朋友可以參考下
2025-03-03
JS開(kāi)發(fā)常用工具函數(shù)(小結(jié))
這篇文章主要介紹了JS開(kāi)發(fā)常用工具函數(shù)
2019-07-07
一文教你用純JS實(shí)現(xiàn)一個(gè)五子棋游戲
實(shí)現(xiàn)一個(gè)五子棋游戲, 簡(jiǎn)要分析其原理, 頁(yè)面并沒(méi)有很花哨, 原理搞懂了, 后面的就是很輕松的事了,本文給大家介紹了如何用純JS實(shí)現(xiàn)一個(gè)五子棋游戲,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下
2023-12-12
基于JS實(shí)現(xiàn)文字轉(zhuǎn)語(yǔ)音即文本朗讀
這篇文章主要為大家詳細(xì)介紹了JavaScript如何利用SpeechSynthesis實(shí)現(xiàn)文字轉(zhuǎn)語(yǔ)音即文本朗讀的功能,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-10-10
移動(dòng)端左右滑動(dòng)切換頁(yè)面效果完整代碼(純JavaScript)
這篇文章主要介紹了如何通過(guò)原生JavaScript實(shí)現(xiàn)移動(dòng)端左右滑動(dòng)效果,并結(jié)合tab切換卡功能,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-03-03
JS彈出層單純的絕對(duì)定位居中示例代碼
這篇文章主要介紹了JS彈出層的絕對(duì)定位居中是如何實(shí)現(xiàn)的,需要的朋友可以參考下
2014-02-02
Bootstrap5的斷點(diǎn)與容器的具體使用
本文將結(jié)合實(shí)例代碼，介紹Bootstrap5的斷點(diǎn)與容器的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-07-07
一文搞懂?parseInt()函數(shù)異常行為
這篇文章主要為大家介紹了一文搞懂?parseInt()函數(shù)異常行為示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
javascript中的緩動(dòng)效果實(shí)現(xiàn)程序
javascript中的緩動(dòng)效果可以應(yīng)用于很多地方，比如距離位移上的變化：圖片的滾動(dòng)、焦點(diǎn)圖的輪轉(zhuǎn)切換，透明度上的變化：漸隱漸現(xiàn)。凡是存在運(yùn)動(dòng)的狀態(tài)都適用，下面以最基本的塊在容器內(nèi)從左到右滑動(dòng)為例，講下幾種不同的緩動(dòng)處理方式
2012-12-12