这是很简单。。

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. Android Camera开发经验总结以及踩过的那些坑

    写在开头 需求方:上传试卷的时候,用户自己拍的照片有很多问题.如:不清晰.图片歪了.错误图片等.我们要是能够对拍摄照片进行识别处理就好了,能够裁切矫正就更好了,最好可以像二维码扫描一样,直接识别处理- ...

  2. 《Beginning Java 7》 - 2 - Cloning 克隆

    Cloning 分两类:影子克隆 shallow cloning 深度克隆 deep cloning * 调用 clone() 需要 implments Cloneable.此函数为 protecte ...

  3. 得到windows聚焦图片(windows 10)

    有些Windows聚焦图片确实很漂亮,很希望保留下来,但是Windows聚焦图片总更好,网上有得到聚焦图片的方法,每次都手动去弄真麻烦,于是自己编了一个小程序,自动得到Windows聚焦图片,下面是运 ...

  4. 制作基于centos可以ssh连接的容器以及tomcat容器

    可以ssh连接的centos容器 参考:http://blog.csdn.net/mexel310/article/details/51705777 一. pull好镜像后,运行容器 1. docke ...

  5. 如何解决 “invalid resource directory name”, resource “crunch”

    Ant and the ADT Plugin for Eclipse are packing the .apk file in a different build chain and temp gen ...

  6. Mockplus原型设计工具介绍

    一.原型设计工具简介 Mockplus (摹客)  一种快速原型设计工具 官网提供四个平台的下载,通用性很广. 二.原型设计的模板 Mockplus可以为设计者提供以下几种模板 其中在“手机”模板里, ...

  7. JAVA数据结构--二叉查找树

    二叉查找树定义 二叉查找树(英语:Binary Search Tree),也称二叉搜索树.有序二叉树(英语:ordered binary tree),排序二叉树(英语:sorted binary tr ...

  8. &与&& ,|与||的区别

    &&和||是短路运算符,&和|是非短路运算符 &&与& 区别:两者都表示“与”运算,但是&&运算符第一个表达式不成立的话,后面的表达式不 ...

  9. Q481 神奇字符串

    神奇的字符串 S 只包含 '1' 和 '2',并遵守以下规则: 字符串 S 是神奇的,因为串联字符 '1' 和 '2' 的连续出现次数会生成字符串 S 本身. 字符串 S 的前几个元素如下:S = & ...

  10. mongo嵌套查询

    db.getCollection('TradeBookingRepresentation').find({uitid:'168282:20190214010009224', tradeVersion: ...