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

 更新时间:2017年08月15日 10:37:41   作者:Cynthia_xie  
这篇文章主要介绍了JavaScript上传文件时不用刷新页面方法,用js+css代码详细介绍了操作过程,需要的朋友可以参考下

用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>

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

相关文章

  • js仿腾讯QQ的web登陆界面

    js仿腾讯QQ的web登陆界面

    这篇文章主要为大家详细介绍了JavaScript模仿腾讯QQ的web登陆界面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 理解Javascript_02_理解undefined和null

    理解Javascript_02_理解undefined和null

    其实在 ECMAScript 的原始类型中,是有Undefined 和 Null 类型的。 这两种类型都分别对应了属于自己的唯一专用值,即undefined 和 null。
    2010-10-10
  • 封装了一个自动生成渐变字的JS类(clip)

    封装了一个自动生成渐变字的JS类(clip)

    之前做过一个生成渐变字体的简单演示今天闲着没事就把这个功能完善了,把JS代码封装成一个类,载入页面就可以使相应的HTML元素内部的字体产生渐变色。
    2008-11-11
  • 用chart.js添加动态背景图

    用chart.js添加动态背景图

    这篇文章主要为大家详细介绍了用chart.js添加动态背景图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 纯JS实现只能输入数字的简单代码

    纯JS实现只能输入数字的简单代码

    本文给大家分享一段简单的代码基于js实现只能输入数字的方法,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
    2017-06-06
  • PHP中如何unicode编码,在JavaScript中h如何解码

    PHP中如何unicode编码,在JavaScript中h如何解码

    PHP中如何unicode编码,在JavaScript中如何解码?js中h这样的,怎么转码?
    2023-07-07
  • Js获取事件对象代码

    Js获取事件对象代码

    js下比较实用的事件绑定代码,学习js 的朋友一定要学习的,为你的页面增加更好的交互。
    2010-08-08
  • 详解JavaScript模块化开发

    详解JavaScript模块化开发

    一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。模块开发需要遵循一定的规范,否则就都乱套了
    2016-12-12
  • js 自动播放的实例代码

    js 自动播放的实例代码

    这篇文章主要介绍了js 自动播放的实例代码,有需要的朋友可以参考一下
    2013-11-11
  • js实现消灭星星(web简易版)

    js实现消灭星星(web简易版)

    这篇文章主要为大家详细介绍了js实现web简易版的消灭星星,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03

最新评论