JavaScript上傳文件時(shí)不用刷新頁面方法總結(jié)(推薦)
用js給出一個(gè)上傳文件時(shí)不用刷新頁面的方案
<input id="upload" type="file"/> <button id="upload-btn">upload</button> document.getElementById('upload-btn').onclick = function(){ var oInput = document.getElementById('upload'); var file = oInput.files[0]; //選取文件 var formData = new FormData(); //創(chuàng)建表單數(shù)據(jù)對(duì)象 formData.append('file',file); //將文件添加到表單對(duì)象中 fetch({ //傳輸 url:'./', mothod:'POST', body:formData }) .then((d)=>{ console.log('result is',d); alert("上傳完畢!") }) }
實(shí)現(xiàn)這么一個(gè)效果:
使用HTML+CSS實(shí)現(xiàn)如圖布局,border-width:5px,格子大小是50px*50px,hover時(shí),邊框變成紅色,需要考慮語義化。
table{ border-collapse:collapse; /* 為表格設(shè)置合并邊框模型 */ margin:50px; text-align:center; /* 設(shè)置文字居中 */ } table tr{ border:none; } table.tab td{ width:50px; height:50px; border:5px inset blue; } table.tab td:hover{ border:5px solid red; cursor: pointer; } <table class="tab"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table>
以上就是無刷新上傳文件的全部?jī)?nèi)容啦,也希望大家繼續(xù)支持腳本之家網(wǎng)站~~~
相關(guān)文章
JavaScript日期工具類DateUtils定義與用法示例
這篇文章主要介紹了JavaScript日期工具類DateUtils定義與用法,涉及javascript針對(duì)日期時(shí)間的獲取、轉(zhuǎn)換、比較、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2018-09-09JS的時(shí)間格式化和時(shí)間戳轉(zhuǎn)換函數(shù)示例詳解
這篇文章主要介紹了JS的時(shí)間格式化和時(shí)間戳轉(zhuǎn)換函數(shù),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07JS實(shí)現(xiàn)同時(shí)搜索百度和必應(yīng)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)同時(shí)搜索百度和必應(yīng)的方法,可實(shí)現(xiàn)在底部的兩個(gè)框架中同時(shí)顯示兩個(gè)搜索引擎的搜索結(jié)果,是非常實(shí)用的技巧,需要的朋友可以參考下2015-01-01詳解JavaScript數(shù)組和字符串中去除重復(fù)值的方法
這篇文章主要介紹了詳解JavaScript數(shù)組和字符串中去除重復(fù)值的方法,及利用各種限制條件對(duì)數(shù)組和字符串進(jìn)行過濾,需要的朋友可以參考下2016-03-03js實(shí)現(xiàn)簡(jiǎn)單的網(wǎng)頁換膚效果
本文主要分享了js實(shí)現(xiàn)簡(jiǎn)單的網(wǎng)頁換膚效果的示例代碼。具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01