這次帶給大家JS上傳檔案不刷新目前頁面,JS上傳檔案不刷新目前頁面的注意事項有哪些,下面就是實戰案例,一起來看一下。
用js給一個上傳檔案時不用重新整理頁面的方案
2eed732a8643f81570eb2757cb89c834 0e5999c1a9f42bf9dc0af437dd98b40bupload65281c5ac262bf6d81768915a4a77ac0 document.getElementById('upload-btn').onclick =function(){ varoInput = document.getElementById('upload'); varfile = oInput.files[0]; //选取文件 varformData =newFormData();//创建表单数据对象 formData.append('file',file);//将文件添加到表单对象中 fetch({ //传输 url:'./', mothod:'POST', body:formData }) .then((d)=>{ console.log('result is',d); alert("上传完毕!") }) }
實現這麼一個效果:
使用HTML CSS實作如圖佈局,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:5pxinsetblue; } table.tab td:hover{ border:5pxsolidred; 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>
我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是JS上傳檔案不刷新目前頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章!