This time I will bring you the precautions on how JS upload files do not refresh the current page and JS upload files do not refresh the current page. The following is a practical case, let’s take a look.
Use js to give a solution without refreshing the page when uploading files
<input id="upload"type="file"/> <button id="upload-btn">upload</button> 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("上传完毕!") }) }
To achieve such an effect:
Use HTML CSS to implement the layout as shown, border-width:5px, the grid size is 50px*50px, when hovering, the border turns red, you need to consider semantic.
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>
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
js realizes the uniform fade-in and fade-out of pictures
How to realize the mutual conversion between numbers and strings in JS
The above is the detailed content of JS upload file does not refresh the current page. For more information, please follow other related articles on the PHP Chinese website!