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 相关文章推荐
JavaScript 节点操作 以及DOMDocument属性和方法
Dec 06 Javascript
Jquery 获得服务器控件值的方法小结
May 11 Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
JS的参数传递示例介绍
Feb 08 Javascript
Javascript学习指南
Dec 01 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
JS实现iframe自适应高度的方法示例
Jan 07 Javascript
Vue仿支付宝支付功能
May 25 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快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
PHP实现的日历功能示例
2018/09/01 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
vuex的简单使用教程
2018/02/02 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
JS canvas实现画板和签字板功能
2021/02/23 Javascript
python django集成cas验证系统
2014/07/14 Python
Python中模块string.py详解
2017/03/12 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
益达广告词
2014/03/14 职场文书
股东合作协议书范本
2014/04/14 职场文书
迎国庆演讲稿
2014/09/15 职场文书
毕业生党员个人总结
2015/02/14 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS