这是很简单。。

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. java集合(1)- 类底层数据结构分析

    Java 集合类图 参考:http://www.cnblogs.com/xwdreamer/archive/2012/05/30/2526822.html

  2. AbstractHandlerMapping解读

    一.AbstractHandlerMapping简介 AbstractHandlerMapping是HandlerMapping的抽象实现,所有的HandlerMapping都继承自AbstractH ...

  3. 移动端网页meta设置和响应式

    苏宁易购WAP的meta分析 响应式 meta设置 媒体查询时读的width为viewport的宽度.viewport宽度为手机分辨率.比如note2 1280*720.需要重置为设备 640*360 ...

  4. RPM安装软件

    RMP:rpm命令详解.注意事项.rpm仓库.安装实例.srpm:源码rpm RPM Package Manager 由Red Hat公司提出,被众多Linux发行版所采用: 建立统一的数据库文件,详 ...

  5. nodejs零基础详细教程2:模块化、fs文件操作模块、http创建服务模块

    第二章  建议学习时间4小时  课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑 ...

  6. list与Set、Map区别

    1.List,Set都是继承自Collection接口,Map则不是 2.List特点:元素有放入顺序,元素可重复 ,Set特点:元素无放入顺序,元素不可重复,重复元素会覆盖掉,(注意:元素虽然无放入 ...

  7. 基于java.util.logging实现轻量级日志记录库(增加根据当前类class初始化,修复线程池模型(javaEE)下的堆栈轨迹顺序与当前调用方法不一致问题)

    前言: 本章介绍自己写的基于java.util.logging的轻量级日志记录库(baseLog). 该版本的日志记录库犹如其名,baseLog,是个实现日志记录基本功能的小库,适合小型项目使用,方便 ...

  8. PHP·笔记(函数总结)

    PHP 指 PHP:超文本预处理器(译者注:PHP: Hypertext Preprocessor,递归命名) PHP 是一种服务器端的脚本语言,类似 ASP PHP 脚本在服务器上执行 PHP 支持 ...

  9. nginx四层负载均衡配置

    nginx四层负载均衡配置代理Mysql集群 环境如下: ip 192.168.6.203 Nginx ip 192.168.6.*(多台) Mysql 步骤一 查看Nginx是否安装stream模块 ...

  10. 东北育才 DAY2组合数取mod (comb)

    组合数取模(comb) [问题描述] 计算C(m,n)mod 9901的值 [输入格式] 从文件comb.in中输入数据. 输入的第一行包含两个整数,m和n [输出格式] 输出到文件comb.out中 ...