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& ...
随机推荐
- windows下Python 3.x图形图像处理库PIL的安装
图像处理是一门应用非常广的技术,而拥有非常丰富第三方扩展库的 Python 当然不会错过这一门盛宴.PIL (Python Imaging Library)是 Python 中最常用的图像处理库,目前 ...
- Customer segmentation – LifeCycle Grids, CLV and CAC with R(转)
We studied a very powerful approach for customer segmentation in the previous post, which is based o ...
- 常用统计分析 SQL 在 AWK 中的实现(转)
转自:http://my.oschina.net/leejun2005/blog/100710 最近有需求需要本地处理一些临时的数据,用做统计分析.如果单纯的 MYSQL 也能实现, 不过一堆临时数据 ...
- 汽车Vin码识别—— 一款二手车行业值得拥有的OCR识别软件
一.汽车Vin码识别产品描述 汽车Vin码识别系统,主要应用在智能手机IOS与Android两个平台中.前端扫描查询模式,无需联网,只需扫描汽车前挡风玻璃右下角的Vin码(车架号),即可轻松识别出车辆 ...
- sql还原(.sql文件还原)
第一步: 把还原文件直接拖到SQL Server 2012(或者其他版本)里面,这里以MyDB.sql为例
- TreeSet集合排序方式二:定制排序Comparator
Comparator有两种实现方式: 1,匿名内部类 2,创建一个类用于实现Comparator,该类创建的对象就是比较器 Person类 public class Person implements ...
- SQL Server使用导入导出向导导入超过4000个字符的字段的数据
在使用SQL Server导入导出向导导入数据的时候,我们经常会碰到某个单元格的数据超长而被截断报错的情况.本文针对这种场景给出相应的解决方案. 环境描述:SQL Server 2012,文件源: ...
- python大规模爬取京东
python大规模爬取京东 主要工具 scrapy BeautifulSoup requests 分析步骤 打开京东首页,输入裤子将会看到页面跳转到了这里,这就是我们要分析的起点 我们可以看到这个页面 ...
- IE6不支持position:fixed的解决方法
解决IE6不支持position:fixed的方法,非常简单,具体调用请参考下面: /*让position:fixed在IE6下可用! */ .fixed-top /* 头部固定 */{positio ...
- Tomcat、JBOSS、WebSphere、WebLogic、Apache等技术概述
Tomcat:应用也算非常广泛的web服务器,支持部分j2ee,免费,出自apache基金组织 JBoss:开源的应用服务器,比较受人喜爱,免费(文档要收费) Weblogic:应该说算是业界 ...