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 相关文章推荐
接收键盘指令的脚本
Jun 26 Javascript
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
Javascript 兼容firefox的一些问题
May 21 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 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中使用PDF文档功能
2006/10/09 PHP
php对gzip文件或者字符串解压实例参考
2008/07/25 PHP
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
php strnatcmp()函数的用法总结
2013/11/27 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
Node.js简单入门前传
2017/08/21 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
python__name__原理及用法详解
2019/11/02 Python
python的faker库用法
2019/11/28 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
Java程序员综合测试题
2014/04/25 面试题
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
实习生的自我评价
2014/01/08 职场文书
党员创先争优承诺书
2014/03/26 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
公诉意见书范文
2015/06/05 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL