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& ...
随机推荐
- Python爬虫02——贴吧图片爬虫V2.0
Python小爬虫——贴吧图片爬虫V2.0 贴吧图片爬虫进阶:在上次的第一个小爬虫过后,用了几次发现每爬一个帖子,都要自己手动输入帖子链接,WTF这程序简直反人类!不行了不行了得改进改进. 思路: 贴 ...
- 教育行业app开发新契机,在线教育要从B端出发
近几年移动互联网教育风生水起,在运营模式上的开拓也各不相同,随着移动互联网进入下半场,好未来.新东方.猿题库.学霸君等,都在加速三四线地区布局,以及教育行业app开发和升级. 在移动互联网下半场,用户 ...
- tab切换插件开发
我开发的tab切换插件,基于jquery库,实现tab标签页的切换.插件的名称为jquery.tabSwitch.js. 插件实现代码如下: ; (function ($) { $.fn.tabSwi ...
- Java中线程总结
本文简要介绍在 Java 世界中, 线程相关知识.主要包含 线程的创建与销毁:线程安全与同步:线程通讯:注意本文没有什么高深新知识,只缘起前段时间在翻看项目代码的时候,发现有些同学对此有诸多误解,故在 ...
- sqlserver删除重复的数据
分享链接: http://blog.csdn.net/s630730701/article/details/52033018 http://blog.csdn.net/anya/article/det ...
- PHP实现Collection数据集类及其原理
本文目录 : Collection源码 讲解与例子 ArrayAccess的使用 JsonSerializable的使用 Countable的使用 IteratorAggregate.ArrayIte ...
- Xmpp学习之Smack发送消息JID变乱码
Xmpp学习之Smack发送消息JID变乱码 版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请表明出处:http://www.cnblogs.com/cavalier-/p/6947723 ...
- Java文件流应用:剪切文件
剪切的实际操作是: 第一步,先复制文件到指定位置, 第二步,删除原文件,这样就实现了剪切 与复制文件相比,多了一步删除文件 注意:删除文件必须在流关闭后,才能删除,否则,删除不了. 实例代码 pack ...
- Java语言编程注意事项
1.大小写敏感,要注意区分大小写: 2.一般每一句代码写完之后,后面以":"结尾: 3.在代码中,括号的出现一般都是成对的,如:{}.
- DiscuzX3.1搬家全过程
最近做了一个安全交流小社区,由于太卡了,之后换了服务器,要给论坛搬家 所以在这里写一下记录. 首先,搬家前要做好以下准备: 1.在网站后台-站长-数据库-备份-网站-Discuz! 和 UCenter ...