这是很简单。。

HTML

<div>
  <input type="file" id="myfile">
  <input type="button" value="上传" onclick="HeadPortraitPicture()">
</div>

JS代码

function HeadPortraitPicture()
{
  if (document.getElementById('myfile').files[0] != null) {//判断上传的文件是否为空
    var fd = new FormData();
    fd.append("fileToUpload", document.getElementById('myfile').files[0]);//这是获取上传的文件
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/DEMO/SettingCode/Exceltolead?type=doExcel");//要传到后台方法的路径
    xhr.upload.addEventListener("progress", uploadProgress, false);
    xhr.addEventListener("load", uploadComplete, false);//返回来的数据
    xhr.addEventListener("error", uploadFailed, false);//返回异常
    xhr.addEventListener("abort", uploadCanceled, false);//返回连接异常
    xhr.send(fd);//放入文件发送到后台
  }
}
function uploadProgress(evt) {
  if (evt.lengthComputable) {
    //var percentComplete = Math.round(evt.loaded * 100 / evt.total);//可以在这里接收进度条数据
  }
  else {
    alert("无法计算!");
  }
}
function uploadComplete(evt) {
  /* 服务器返回数据*/
  var message = evt.target.responseText;//接收返回来的数据
}

function uploadFailed(evt) {
  alert("上传出错.");
}

function uploadCanceled(evt) {
  alert("上传已由用户或浏览器取消删除连接.");
}

JS将文件像form表单一样提交到后台的更多相关文章

  1. JS将文件以form表单一样提交到后台

    这是很简单.. HTML <div> <input type="file" id="myfile"> <input type=&q ...

  2. jQuery动态创建form表单并提交到后台(携带一定的数据进行页面跳转)

    今天遇到这么一个需求,携带一个编号一个名字跳转到另一个JSP页面,直接页面跳转(get携带数据)的话不太安全,于是想到到后台转发一下. 第一种:直接以表单提交方式的进行 JS代码: var form ...

  3. asp.net中通过form表单submit提交到后台的实例

    前台<body>中的代码: <body> <div id="top"> </div> <form id="login ...

  4. 使用ajax方法实现form表单的提交(附源码)

    写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...

  5. 利用 ajax自定义Form表单的提交方式

    需求场景:有时候单纯的form表单无法向后端传递额外的参数 比如需要action传递js异步生成的参数 ,form表单默认的action就无法满足需求,这时就需要我们自定义form表单的提交方式. h ...

  6. form表单的提交方式

    开发中表单提交是很常见的,表单的提交方式也多种方式. 1.使用submit按钮提交表单  <input type="submit"/> <!DOCTYPE htm ...

  7. 使用ajax方法实现form表单的提交

    作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 写在前面的话 在使用form表单的时候,一旦点击提交触发submit ...

  8. 基于form表单submit提交不跳转

    方法一:target <html> <body> <form action="" method="post" target=&qu ...

  9. JavaScript 创建一个 form 表单并提交

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

随机推荐

  1. SQL Server分页查询存储过程

    --分页存储过程create PROCEDURE [dbo].[commonPagination]@columns varchar(500), --要显示的列名,用逗号隔开 @tableName va ...

  2. QTP如何准确识别Dialog中的对象

    QTP脚本中有一个点击网页弹出框确定按钮的操作,实际运行时发现存在问题:调试过程,可正常识别并点击:但批量运行时不能识别并点击的概率接近100%. 修改WinButton的其中一个对象属性后,该问题解 ...

  3. SDOI2010粟粟的书架

    题目传送:https://www.luogu.org/problemnew/show/P2468 这是一个二合一的题目,前50% \(n!=1\)的分数中,我们考虑用动态规划来做. 设\(sum[i] ...

  4. Mysql数据类型《三》枚举类型与集合类型

    枚举类型与集合类型 字段的值只能在给定范围中选择,如单选框,多选框 enum 单选 只能在给定的范围内选一个值,如性别 sex 男male/女female set 多选 在给定的范围内可以选择一个或一 ...

  5. 洛谷P2462 [SDOI2007]游戏(哈希+最长路)

    题面 传送门 题解 我们把字符的出现次数哈希起来,然后把每个点向能在它之后的点连边.那么这显然是一个\(DAG\),直接求最长路就行了 //minamoto #include<bits/stdc ...

  6. MySQL 5.7.16 在CentOS 6.5 x64 安装

    1.创建MySQL组和MySQL用户   # groupadd mysql   # useradd -g mysql mysql2.创建MySQL软件安装路径/opt/software   # mkd ...

  7. 浅谈iOS开发中多语言的字符串排序

    一.前言 在iOS开发中,一个经常的场景是利用tableview展示一组数据,以很多首歌曲为例子.为了便于查找,一般会把这些歌曲按照一定的顺序排列,还会加上索引条以便于快速定位. 由于歌曲名可能有数字 ...

  8. python中package机制的两种实现方式

    当执行import module时,解释器会根据下面的搜索路径,搜索module1.py文件. 1) 当前工作目录 2) PYTHONPATH中的目录 3) Python安装目录 (/usr/loca ...

  9. windows本地搭建nginx+php+mysql+redis环境详细步骤

    1.mysql的下载和安装 这个可参考我另外一篇文章:http://www.cnblogs.com/myIvan/p/9265645.html 2.php的下载和配置修改 下载地址:https://w ...

  10. 扩展欧拉定理【洛谷P4139】 上帝与集合的正确用法

    P4139 上帝与集合的正确用法 \(2^{2^{2^{\dots}}}\bmod p\) 卡最优解倒数第一祭. 带一下扩展欧拉定理就好了. code: #include <iostream&g ...