JavaScript上傳文件時不用刷新頁面方法總結（推薦）
更新時間：2017年08月15日 10:37:41 作者：Cynthia_xie
這篇文章主要介紹了JavaScript上傳文件時不用刷新頁面方法，用js+css代碼詳細介紹了操作過程,需要的朋友可以參考下
用js給出一個上傳文件時不用刷新頁面的方案
<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ù)對象
formData.append('file',file); //將文件添加到表單對象中
fetch({ //傳輸
url:'./',
mothod:'POST',
body:formData
})
.then((d)=>{
console.log('result is',d);
alert("上傳完畢！")
})
}
實現(xiàn)這么一個效果：
使用HTML+CSS實現(xiàn)如圖布局，border-width:5px，格子大小是50px*50px，hover時，邊框變成紅色，需要考慮語義化。
table{
border-collapse:collapse; /* 為表格設置合并邊框模型 */
margin:50px;
text-align:center; /* 設置文字居中 */
}
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>
以上就是無刷新上傳文件的全部內容啦，也希望大家繼續(xù)支持腳本之家網站~~~
相關文章
這篇文章主要為大家詳細介紹了JavaScript模仿騰訊QQ的web登陸界面，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
理解Javascript_02_理解undefined和null
其實在 ECMAScript 的原始類型中，是有Undefined 和 Null 類型的。 這兩種類型都分別對應了屬于自己的唯一專用值，即undefined 和 null。2010-10-10
之前做過一個生成漸變字體的簡單演示今天閑著沒事就把這個功能完善了，把JS代碼封裝成一個類，載入頁面就可以使相應的HTML元素內部的字體產生漸變色。2008-11-11
這篇文章主要為大家詳細介紹了用chart.js添加動態(tài)背景圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
本文給大家分享一段簡單的代碼基于js實現(xiàn)只能輸入數(shù)字的方法，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-06-06
PHP中如何unicode編碼，在JavaScript中h如何解碼
PHP中如何unicode編碼，在JavaScript中如何解碼？js中h這樣的，怎么轉碼？2023-07-07
js下比較實用的事件綁定代碼，學習js 的朋友一定要學習的，為你的頁面增加更好的交互。2010-08-08
一個模塊就是實現(xiàn)特定功能的文件，有了模塊，我們就可以更方便地使用別人的代碼，想要什么功能，就加載什么模塊。模塊開發(fā)需要遵循一定的規(guī)范，否則就都亂套了2016-12-12
這篇文章主要介紹了js 自動播放的實例代碼，有需要的朋友可以參考一下2013-11-11
這篇文章主要為大家詳細介紹了js實現(xiàn)web簡易版的消滅星星，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03