广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >JavaScript如何实现上传文件时不用刷新页面
  • 365
分享到

JavaScript如何实现上传文件时不用刷新页面

javascript 2022-10-19 06:10:15 365人浏览 八月长安
摘要

这篇文章主要为大家展示了“javascript如何实现上传文件时不用刷新页面”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript如何实现上传文件时

这篇文章主要为大家展示了“javascript如何实现上传文件时不用刷新页面”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript如何实现上传文件时不用刷新页面”这篇文章吧。

用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如何实现上传文件时不用刷新页面”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网node.js频道!

--结束END--

本文标题: JavaScript如何实现上传文件时不用刷新页面

本文链接: https://www.lsjlt.com/news/75335.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript如何实现上传文件时不用刷新页面
    这篇文章主要为大家展示了“JavaScript如何实现上传文件时不用刷新页面”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript如何实现上传文件时...
    99+
    2022-10-19
    javascript
  • 怎么利用HTML5实现不刷新文件上传
    本篇内容主要讲解“怎么利用HTML5实现不刷新文件上传”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么利用HTML5实现不刷新文件上传”吧!之前朋友说的不刷新...
    99+
    2022-10-19
    html5
  • jsp+ajax如何实现无刷新上传文件
    这篇文章主要为大家展示了“jsp+ajax如何实现无刷新上传文件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jsp+ajax如何...
    99+
    2022-10-19
    jsp ajax
  • JavaScript如何实现页面的刷新
    这篇文章主要讲解了“JavaScript如何实现页面的刷新”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript如何实现页面的刷新”吧! ...
    99+
    2022-10-19
    javascript
  • AngularJS如何实现页面定时刷新
    这篇文章主要介绍了AngularJS如何实现页面定时刷新,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。有时我们在前端可能会有这样的需求:1、...
    99+
    2022-10-19
    angularjs
  • ajax如何实现无刷新上传文件功能
    这篇文章主要介绍了ajax如何实现无刷新上传文件功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下<!DOCTYPE HTML><ht...
    99+
    2023-06-08
  • php如何实现返回不刷新页面
    这篇文章主要讲解了“php如何实现返回不刷新页面”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“php如何实现返回不刷新页面”吧!php实现返回不刷新页面的方法:1、打开相应的PHP代码文件;...
    99+
    2023-06-25
  • ajax如何实现无刷新提交表单、上传文件
    这篇文章主要介绍ajax如何实现无刷新提交表单、上传文件,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、HTML代码 <!DOCTYPE html PUBLIC &...
    99+
    2022-10-19
    ajax
  • jQuery的ajax中如何使用FormData实现页面无刷新上传功能
    小编给大家分享一下jQuery的ajax中如何使用FormData实现页面无刷新上传功能,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!1,先看效果图期望的功能和效果很简单:点击页面中的上传...
    99+
    2022-10-19
    jquery ajax formdata
  • 如何实现不刷新网页就能链接新的js文件
    这篇文章给大家分享的是有关如何实现不刷新网页就能链接新的js文件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。如何不刷新网页就能链接新的js文件,其实在HTML语言中已经有相关的...
    99+
    2022-10-19
    js
  • jQuery如何实现AJAX定时刷新局部页面
    这篇文章主要介绍了jQuery如何实现AJAX定时刷新局部页面,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。方法一:局部刷新我们讲述到最多的...
    99+
    2022-10-19
    jquery ajax
  • Ajax如何实现无闪烁定时刷新页面
    这篇文章主要介绍Ajax如何实现无闪烁定时刷新页面,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在Web开发中我们经常需要实现定时刷新某个页面:来保持session的值或者检查session的值是否为空(比如说防止同...
    99+
    2023-06-08
  • AngularJs如何实现返回前一页面时刷新一次前面页面
    小编给大家分享一下AngularJs如何实现返回前一页面时刷新一次前面页面,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!要求:页...
    99+
    2022-10-19
    angularjs
  • jQuery如何实现页面倒计时并刷新效果
    这篇文章主要介绍jQuery如何实现页面倒计时并刷新效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!代码如下所示:var intDiff = pars...
    99+
    2022-10-19
    jquery
  • 怎么用jQuery+php+ajax实现无刷新上传文件功能
    这篇文章主要讲解了“怎么用jQuery+php+ajax实现无刷新上传文件功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用jQuery+php+aj...
    99+
    2022-10-19
    jquery php ajax
  • JavaScript基于Ajax实现不刷新在网页上动态显示文件内容的示例分析
    这篇文章主要介绍JavaScript基于Ajax实现不刷新在网页上动态显示文件内容的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!下面的JS代码是一个最基础的JS的ajax实...
    99+
    2022-10-19
    javascript ajax
  • JavaScript中Uploadify如何实现文件上传
    这篇文章主要介绍了JavaScript中Uploadify如何实现文件上传,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。运行环境: Java...
    99+
    2022-10-19
    uploadify js
  • React如何使用refresh_token实现无感刷新页面
    目录步骤如下:具体实现步骤如下: 1-token过期根据refresh_token获取新的token 重新获取数据 2-创建一个新的axios实例 【使用request防止再次进入请...
    99+
    2022-11-13
    React refresh_token无感刷新 React 无感刷新
  • 微信小程序中如何实现返回tabBar不刷新页面
    这篇文章主要介绍微信小程序中如何实现返回tabBar不刷新页面,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1、在一个项目中,遇到了这个场景:返回tabBar中的某个页面是需要保存数...
    99+
    2022-10-19
    微信小程序 tabbar
  • H5+WebSocket如何实现多文件同时上传
    这篇文章主要介绍了H5+WebSocket如何实现多文件同时上传,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在传统的HTTP应用上传文件想...
    99+
    2022-10-19
    html5 websocket
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作