这是很简单。。

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. user profile信息同步问题

    经过下午的远程会议, 该问题已经解决. 以下为小结以及针对AD同步账号的权限配置的要求: 纠正: 1. 将现有的所有User Profile Service Application 删除 2. 执行I ...

  2. 清北学堂(2019 4 30 ) part 3

    今天总的讲些算法,会了的话...看上去好厉害的样子: 1.老朋友动态规划DP: DP重点: 1.边界条件,开头不需处理的数据,比如斐波那契数列中的第一二项 2.转移方程,后面的项需要根据前面几项求出自 ...

  3. 初学python - 字典

    字符串转为字典 import astline=input()linedict=ast.literal_eval(line) 遍历字典 for key in linedict: value=linedi ...

  4. C#面向对象二

    1.方法的定义 概念:对象的动态特征就是方法(静态特征是属性),方法表示此对象可以做什么. 类型:实例方法,静态方法,(构造方法,多态时会用到抽象方法和虚方法) 2.注意事项 访问修饰符:默认priv ...

  5. zabbix前端添加平台脚本监控

    1.在前端创建脚本 2.添加监控配置 # 这里添加的监控为ping命令,用来探测网络的可用性. # 这里添加的监控为traceroute命令,用来探测网络的可用性. # 这里添加的监控为nmap命令, ...

  6. [51nod] 1090 3个数和为0 暴力+二分

    给出一个长度为N的无序数组,数组中的元素为整数,有正有负包括0,并互不相等.从中找出所有和 = 0的3个数的组合.如果没有这样的组合,输出No Solution.如果有多个,按照3个数中最小的数从小到 ...

  7. [Maven实战-许晓斌]-[第二章]-2.6 NetBeans上面安装Maven插件

    NetBeans上面安装Maven插件

  8. WordPress翻译更新失败解决方法

    编辑php的配置文件:php.ini,搜索并找到disable_functions: 删除disable_functions后面的scandir字符串,保存php.ini: 重载或重启php-fpm服 ...

  9. 51 Nod 1007 dp

    1007 正整数分组 1 秒 131,072 KB 10 分 2 级题   将一堆正整数分为2组,要求2组的和相差最小. 例如:1 2 3 4 5,将1 2 4分为1组,3 5分为1组,两组和相差1, ...

  10. 02. css3有哪些新特性?

    2.css3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gradient),旋转(t ...