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 相关文章推荐
js中cookie的使用详细分析
May 28 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
教你如何在Node.js中使用jQuery
Aug 28 Javascript
AngularJs  Understanding Angular Templates
Sep 02 Javascript
node.js 抓取代理ip实例代码
Apr 30 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 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中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
Three.js基础学习教程
2017/11/16 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
python函数形参用法实例分析
2015/08/04 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
python检索特定内容的文本文件实例
2018/06/05 Python
在python中实现对list求和及求积
2018/11/14 Python
使用Python实现牛顿法求极值
2020/02/10 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
Python修改DBF文件指定列
2020/12/19 Python
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
日期和时间问题
2015/01/04 面试题
公司司机岗位职责
2014/02/07 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
实习生矿工检讨书
2014/10/13 职场文书
家长意见书
2015/06/04 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python
JUnit5常用注解的使用
2021/07/02 Java/Android
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers