Home > Web Front-end > JS Tutorial > body text

JS upload file does not refresh the current page

php中世界最好的语言
Release: 2018-04-19 10:03:35
Original
1782 people have browsed it

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("上传完毕!")
 })
}
Copy after login

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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template