快捷導(dǎo)航

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

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

本文通過實(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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

JavaScript中的變量聲明你知道嗎
這篇文章主要為大家詳細(xì)介紹了JavaScript中的變量聲明，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-01-01
JavaScript實(shí)現(xiàn)的選擇排序算法實(shí)例分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的選擇排序算法,結(jié)合實(shí)例形式分析了選擇排序的原理、實(shí)現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下
2017-04-04
分析javascript原型及原型鏈
本篇文章給大家詳細(xì)分析了javascript原型及原型鏈的相關(guān)知識(shí)點(diǎn)以及用法分享，有興趣的朋友參考下。
2018-03-03
跟我學(xué)習(xí)javascript的循環(huán)
跟我學(xué)習(xí)javascript的循環(huán)，本文不僅針對(duì)javascript循環(huán)進(jìn)行講解，還對(duì)prototype補(bǔ)充了幾點(diǎn)小tips，歡迎大家閱讀。
2015-11-11
解析瀏覽器端的AJAX緩存機(jī)制
這里我們來解析瀏覽器端的AJAX緩存機(jī)制,來共同看一下AJAX緩存與HTTP緩存的關(guān)系以及AJAX緩存的刷新時(shí)間問題
2016-06-06
JavaScript Scoping and Hoisting 翻譯
希望這篇文章能夠給JavaScript程序員最容易困惑的部分一些啟示。我盡力寫的全面，以免引起更多的困惑。如果我寫錯(cuò)了或是漏掉了某些重要的東西，請(qǐng)一定讓我知道
2012-07-07
js獲取字符串字節(jié)數(shù)方法小結(jié)
這篇文章主要介紹了js獲取字符串字節(jié)數(shù)方法,實(shí)例總結(jié)了javascript字符串長(zhǎng)度計(jì)算的相關(guān)技巧,需要的朋友可以參考下
2015-06-06
Bootstrap框架的學(xué)習(xí)教程詳解(二)
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。本文給大家介紹Bootstrap框架的學(xué)習(xí)教程詳解，對(duì)bootstrap框架感興趣的朋友跟著小編一起學(xué)習(xí)吧
2016-10-10
JS的參數(shù)傳遞示例介紹
想必大家對(duì)參數(shù)傳遞并不陌生吧，本文為大家介紹下JS的參數(shù)傳遞,需要的朋友可以參考下
2014-02-02
Bootstrap基本組件學(xué)習(xí)筆記之下拉菜單(7)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之下拉菜單,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12