首页 > 编程 > JavaScript > 正文

JavaScript上传文件时不用刷新页面方法总结(推荐)

2019-11-19 15:47:55
字体:
来源:转载
供稿:网友

用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(); //创建表单数据对象  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: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>

以上就是无刷新上传文件的全部内容啦,也希望大家继续支持武林网网站~~~

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表