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


Posted in Javascript onAugust 15, 2017

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

       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;
  }
  <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>

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

Javascript 相关文章推荐
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
Apr 11 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
关于vue.js发布后路径引用的问题解决
Aug 15 Javascript
Node 自动化部署的方法
Oct 17 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 #Javascript
jQuery DOM节点的遍历方法小结
Aug 15 #jQuery
Mongoose实现虚拟字段查询的方法详解
Aug 15 #Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 #Javascript
React应用中使用Bootstrap的方法
Aug 15 #Javascript
JavaScript函数中的this四种绑定形式
Aug 15 #Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 #Javascript
You might like
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
js日历功能对象
2012/01/12 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
2017/01/04 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
Python 模拟登陆的两种实现方法
2017/08/10 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
delegate与普通函数的区别
2014/01/22 面试题
美工的岗位职责
2013/11/14 职场文书
毕业自我评价范文
2013/11/17 职场文书
自主招生自荐书
2013/11/29 职场文书
孝老爱亲模范事迹
2014/01/24 职场文书
业务总经理岗位职责
2014/02/03 职场文书
怎样写好创业计划书的内容
2014/02/06 职场文书
代理协议书范本
2014/04/22 职场文书
书香校园建设方案
2014/05/02 职场文书
检讨书怎么写
2015/05/07 职场文书
外出考察学习心得体会
2016/01/18 职场文书
高中化学教学反思
2016/02/22 职场文书
Vue如何清空对象
2022/03/03 Vue.js
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang