189 8069 5689

JavaScript如何实现上传文件时不用刷新页面

这篇文章主要为大家展示了“JavaScript如何实现上传文件时不用刷新页面”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript如何实现上传文件时不用刷新页面”这篇文章吧。

创新互联专注于临西企业网站建设,响应式网站建设,成都做商城网站。临西网站建设公司,为临西等地区提供建站服务。全流程按需定制开发,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务

用js给出一个上传文件时不用刷新页面的方案

 
 upload
 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时,边框变成红色,需要考虑语义化。

       JavaScript如何实现上传文件时不用刷新页面

 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;
  }
  
  
   1
   2
   3
  
  
   4
   5
   6
  
  
   7
   8
   9
  
  

以上是“JavaScript如何实现上传文件时不用刷新页面”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


当前标题:JavaScript如何实现上传文件时不用刷新页面
分享URL:http://cdxtjz.cn/article/pihpge.html

其他资讯