JavaScript上傳文件時(shí)不用刷新頁(yè)面方法總結(jié)(推薦)
用js給出一個(gè)上傳文件時(shí)不用刷新頁(yè)面的方案
<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í),邊框變成紅色,需要考慮語(yǔ)義化。

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)站~~~
- JS關(guān)于刷新頁(yè)面的相關(guān)總結(jié)
- Javascript刷新頁(yè)面的實(shí)例
- 解決微信瀏覽器Javascript無法使用window.location.reload()刷新頁(yè)面
- JS在一定時(shí)間內(nèi)跳轉(zhuǎn)頁(yè)面及各種刷新頁(yè)面的實(shí)現(xiàn)方法
- 刷新頁(yè)面的幾種方法小結(jié)(JS,ASP.NET)
- js局部刷新頁(yè)面時(shí)間具體實(shí)現(xiàn)
- JS定時(shí)刷新頁(yè)面及跳轉(zhuǎn)頁(yè)面的方法
- JavaScript刷新頁(yè)面的幾種方法總結(jié)
相關(guān)文章
理解Javascript_02_理解undefined和null
其實(shí)在 ECMAScript 的原始類型中,是有Undefined 和 Null 類型的。 這兩種類型都分別對(duì)應(yīng)了屬于自己的唯一專用值,即undefined 和 null。2010-10-10
封裝了一個(gè)自動(dòng)生成漸變字的JS類(clip)
之前做過一個(gè)生成漸變字體的簡(jiǎn)單演示今天閑著沒事就把這個(gè)功能完善了,把JS代碼封裝成一個(gè)類,載入頁(yè)面就可以使相應(yīng)的HTML元素內(nèi)部的字體產(chǎn)生漸變色。2008-11-11
純JS實(shí)現(xiàn)只能輸入數(shù)字的簡(jiǎn)單代碼
本文給大家分享一段簡(jiǎn)單的代碼基于js實(shí)現(xiàn)只能輸入數(shù)字的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下吧2017-06-06
PHP中如何unicode編碼,在JavaScript中h如何解碼
PHP中如何unicode編碼,在JavaScript中如何解碼?js中h這樣的,怎么轉(zhuǎn)碼?2023-07-07
js實(shí)現(xiàn)消滅星星(web簡(jiǎn)易版)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)web簡(jiǎn)易版的消滅星星,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03

