JS将文件以form表单一样提交到后台
这是很简单。。
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表单一样提交到后台的更多相关文章
- JS将文件像form表单一样提交到后台
这是很简单.. HTML <div> <input type="file" id="myfile"> <input type=&q ...
- jQuery动态创建form表单并提交到后台(携带一定的数据进行页面跳转)
今天遇到这么一个需求,携带一个编号一个名字跳转到另一个JSP页面,直接页面跳转(get携带数据)的话不太安全,于是想到到后台转发一下. 第一种:直接以表单提交方式的进行 JS代码: var form ...
- asp.net中通过form表单submit提交到后台的实例
前台<body>中的代码: <body> <div id="top"> </div> <form id="login ...
- 使用ajax方法实现form表单的提交(附源码)
写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...
- 利用 ajax自定义Form表单的提交方式
需求场景:有时候单纯的form表单无法向后端传递额外的参数 比如需要action传递js异步生成的参数 ,form表单默认的action就无法满足需求,这时就需要我们自定义form表单的提交方式. h ...
- form表单的提交方式
开发中表单提交是很常见的,表单的提交方式也多种方式. 1.使用submit按钮提交表单 <input type="submit"/> <!DOCTYPE htm ...
- 使用ajax方法实现form表单的提交
作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 写在前面的话 在使用form表单的时候,一旦点击提交触发submit ...
- 基于form表单submit提交不跳转
方法一:target <html> <body> <form action="" method="post" target=&qu ...
- JavaScript 创建一个 form 表单并提交
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
随机推荐
- 树莓派安装FLASK服务;并在端网页读取 GPIO状态和系统时间
做过一些物联网的作品:因为不想一直做APP来控制,因为不能每个人都去下载你自己做的APP,浏览器大家都是有的:那么每个人通过浏览器WEB来访问我们服务器,岂不是很简单和方便,采用flask+pytho ...
- linux tcp中time_wait
http://www.cnblogs.com/my_life/articles/3460873.html http://blog.csdn.net/sunnydogzhou/article/detai ...
- 使用babel编译es6
起因:开发中慢慢的学习使用es6,但是JavaScript需要浏览器来解析,而不是所有浏览器都支持es6,所以为了兼容es6,需要第三方工具进行编译es6. 工具:node,gulp,gulp-bab ...
- tornado之文件上传的几种形式form,伪ajax(iframe)
1直接form提交给后台处理 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- Linux上open-iscsi 的安装,配置和使用
关于open-iscsi open-iscsi是一个实现 RFC3720 iSCSI协议的高性能initiator程序.iSCSI使得访问SAN上的存储不再只能依赖Fibre Channel,也可以通 ...
- Ionic3新特性--页面懒加载2加载其他组件
在第一节中,我们介绍了页面的懒加载方式,并进行了初步的分析,这里,我们将进一步介绍如何配合页面懒加载进行其他组件Component.Pipe.Directive等的模块化,和加载使用. 首先说明一点, ...
- Webstorm 激活破解
2017-06-15更新 之前都是使用2017.2.27的方法,版本是2017.1.1,还没提示过期,但是根据评论说这个链接已经失效了,评论也给出了个新地址:http://idea.iteblog.c ...
- [0] 分析 EntityName 时出错。 行 2,位置 *。
1. 报错内容“若要在加载设计器前避免可能发生的数据丢失,必须纠正以下错误: ” “分析 EntityName 时出错. 行 2,位置 *.” 2. 如图: 3. 解决方案:查看项目全路径,是否有 ...
- 蜘蛛大战之 站点LOGO(SEO)
起因: 同事让我看 搜公司名称,百度第一位并没有出现公司网址,是别人的,然后我 惊奇的发现,站点logo 竟然 抓了张 无关紧要的图片,从此 变开始了 为期 10天+的战争: 经过: [2017-06 ...
- R语言统计分析技术研究——卡方检验的思想和实现
卡方检验的思想和实现 作者:李雪丽 材料摘自:百度