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

 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>

以上就是无刷新上传文件的全部内容啦，也希望大家继续支持我们网站~~~

赞 (0)

相关推荐

  • 使用jQuery ajaxupload插件实现无刷新上传文件

    项目中会经常用到AJAX无刷新上传图片,但是iframe上传和flash插件都是比较复杂的,所以就找了一个jquery的插件. 代码如下 使用方法如下 <script type="text/javascript"> $(function () { var button = $('#upload'); new AjaxUpload(button, { action: '/upload/imagesAjaxUpload', name: 'upload', onSubmit: f

  • 通过Ajax使用FormData对象无刷新上传文件方法

    写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比较敏感的网站慎用. 在工作中遇到了一个问题:在一个页面中,有4块内容,每块内容都包含一个图片上传功能,希望可以实现一键把这四块内容都上传上去. 我没有用插件实现上传功能,就是用的input[type=file],因此就遇到一个问题就是: ①传统的form表单会导致页面刷新,无法实现上述功能 ②把表单

  • 通过隐藏iframe实现无刷新上传文件操作

    其实在ajax出现之前,web应用也可以是无刷新的,那时大多通过IFrame来做到这一点.当然Ajax出现之后,人们一窝蜂地投奔Ajax 的阵营了,iFrame 就乏人问津了.但是用iFrame来实现无刷新上传文件确实一个很好的选择. 解决办法是通过一个隐藏的iframe来处理上传操作我采用的是ReactJS,amazeui,nodejs 1.html target指向iframe的name,就是把上传后的操作交给iframe来处理. <form id="supplyformFile&qu

  • PHP无刷新上传文件实现代码

    index.html 复制代码 代码如下: <html> <head> <title>无刷新上传文件</title> <meta Content-type="text/html" charset="utf-8" /> <script type="text/javascript"> function startUpload() { document.getElementById

  • jQuery实现jQuery-form.js实现异步上传文件

    做为一个前端开发,你肯定遇到过这样的需求:异步上传文件,还要兼容IE 8.[纳尼,没遇到过,那你们产品和UI对你也忒好了吧. 遇到这种需求,如果项目不是很赶,可以自己用iframe来做,如果项目比较赶的话,就可以使用jquery-form.js插件来实现,方便快捷. 一.举个栗子 1.先下载 JQuery-form.js文件并引入,也可以使用CDN,因为是jquery插件,所以需要先引入jquery. 2.html 部分: <form action='' enctype="multipar

  • 无刷新上传文件并返回自定义值

    今天开发过程中遇到了这样一个问题:需要将Excel上传至服务器进行解析,但是在文档不合适的情况下希望可以不刷新页面提示用户文档不合适.冥思苦想了半天,在网上找了不少资料最终试验成功,在此分享下处理方法: 首先先说下处理思路:在页面上添加一个隐藏的iframe,设置form表单的target属性设置为iframe的id,这样form提交时会将excel文件以文件流的形式传到后台,在后台接收后可进行自定义操作,之后返回的信息将显示在iframe中而不进行跳转,iframe之前设置为隐藏,所以页面不会

  • 谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法

    谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法

    发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"upload",其它的不做任何处理: <form method="POST" action="upload" enctype="multipart/form-data"> 名字 <input type="text&q

  • 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

  • JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法

    废话不多说了,直接给大家贴代码了,具体代码如下所示: // 上传目标触发点 <input type="file" class="upvideo" name="upvideo" id="fileupload1" /> // 引入插件 <script type="text/javascript" src="{$IMG}/bstage/js/jquery.form.js" l

  • PHP上传文件时自动分配路径的方法

    本文实例讲述了PHP上传文件时自动分配路径的方法.分享给大家供大家参考.具体分析如下: 网站上传文件时,如果是小的企业站,放在一个目录还没问题,当网站大了,上传的文件多了,我们就不能放在同一个目录了,这里我们就来讲讲用PHP自动给上传的文件分配路径的方法. PHP分配上传文件的路径实例 主要程序片段如下: 复制代码 代码如下: <?php    /*数字方式分配路径*/    function allotPath($id, $extend='jpg') {       $folders = st

  • Django 解决上传文件时,request.FILES为空的问题

    用html的form上传文件时,request.FILES为空,没有收到上传来的文件,但是在request.POST里找到了上传的文件名(只是一个字符串). 解决方法: 为form表单规定enctype属性,其值为"multipart/form-data". enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码. 值 描述 application/x-www-form-urlencoded 在发送前编码所有字符(默认) multipart/form-data 不对字符编

  • JavaScript 上传文件限制参数案例详解

    项目场景: 1,上传文件限制 功能作用: 1,防止前端操作上传异常文件 2,限制符合的规则,优化展示模型 功能实现: 1,获取file实例 2,执行校验规则方法 代码如下: //大小限制 checkFileSize(file, rules) { return new Promise((resolve, reject) => { file.size / 1024 / 1024 > rules ? reject() : resolve() }).then( () => { return tr

  • Springboot上传文件时提示405问题及排坑过程

    Springboot上传文件时提示405问题及排坑过程

    目录 Springboot上传文件时提示405 解决方案1 解决方案2 Springboot使用过程中遇到的一些问题 异常一 异常二:Mysql连接报错 异常三:整合Druid密码解密失败 Springboot上传文件时提示405 问题描述:上传文件时请求不通,状态码返回405,如下图:  问题分析:405 Method Not Allowed,请求行中指定的请求方法不能被用于请求相应的资源.该响应必须返回一个Allow 头信息用以表示出当前资源能够接受的请求方法的列表.简单说就是请求方法不支持

  • js获取上传文件的绝对路径实现方法

    在html中 <input type="file" id="importFile" /> <input type="button" onclick="upload()"/> <script> function upload() { var filename = document.getElementById("importFile").value; // 这时的filen

  • PHP实现上传文件并存进数据库的方法

    本文实例讲述了PHP实现上传文件并存进数据库的方法.分享给大家供大家参考.具体如下: show_add.php文件如下: <?php if(!isset($_REQUEST['id']) or $_REQUEST['id']=="") die("error: id none"); $id = $_REQUEST['id']; //定位记录,读出 $conn=mysql_connect("localhost","root"

  • SpringMVC 上传文件 MultipartFile 转为 File的方法

    在使用 SpringMVC 上传文件时,接收到的文件格式为 MultipartFile,但是在很多场景下使用都需要File格式的文件,记录下以便日后使用. 以下mFile为MultipartFile文件 此方法会在本地产生临时文件,使用完毕需要删除 在网上搜索未发现可直接使用的不产生临时文件的方法,查到几个本地测试皆无法通过,如哪位有不产生临时文件的方法,请多多指教

  • Zend Framework上传文件重命名的实现方法

    本文实例讲述了Zend Framework上传文件重命名的实现方法.分享给大家供大家参考,具体如下: 1. Zend Framework文件上传重命名 //实例化文件上专类 $fName=$this->_request->getPost('fName'); $adapter = new Zend_File_Transfer_Adapter_Http(); //存放上传文件的文件夹 $adapter->setDestination('/opt/lampp/htdocs/blog/uploa

随机推荐