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& ...
随机推荐
- AJAX方式调用百度天气
后台代码: [HttpPost] public string AjaxWeather() { string CityName = string.IsNullOrEmpty(Request.Form[& ...
- 解决Win8.1系统Wpprecorder.sys蓝屏故障
为了跨平台调试,在Mac Air使用Bootscamp安装了Windows 8.1,但是经常出现system_thread_exceptions_not_handled(Wpprecorder.sys ...
- Django-03视图层
5.1 视图函数 一个视图函数,简称视图,是一个简单的Python 函数,它接受Web请求并且返回Web响应.响应可以是一张网页的HTML内容,一个重定向,一个404错误,一个XML文档,或者一张图片 ...
- 透明数据加密 (TDE)常见问题解答
透明数据加密 (TDE)常见问题解答问题任何人只要有权访问加密数据就能对其进行解密吗?TDE 会带来哪些开销?哪些加密算法可与 TDE 一同使用?可以使用第三方加密算法代替 TDE 提供的算法吗?可以 ...
- alicemq 方便的RabbitMQ 可视化工具
尽管RabbitMQ 自带一个管理插件,但是还不是那么强大,alicemq 是一个方便强大的可视化工具 rabbitmq 环境准备 docker-compose 文件 version: "3 ...
- [ActionScript 3.0] 创建倒影
package { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.Display ...
- CentOS 安装系统侦察工具
Nessus setup: rpm -ivh http://downloads.nessus.org/nessus3dl.php\?file\=Nessus-6.10.2-es6.x86_64.rpm ...
- 修改ZuulHandlerMapping私有变量pathMatcher,重写match方法,使url匹配兼容正则表达式。
一.起源 在mocksever中引入了spring cloud zuul做代理转发,如果请求的url和配置的mock规则匹配(精确匹配和模糊匹配),忽略,不做转发.如果mock配置的url和请求url ...
- jenkins 判断是手动触发还是定时器触发
根据变量BUILD_CAUSE的值可以判断本次触发是手动触发还是定时器触发 手动触发:MANUALTRIGGER 定时器触发:TIMERTRIGGER
- spider_keeper
一 简介 spider_keeper 是一款开源的spider管理工具,可以方便的进行爬虫的启动,暂停,定时,同时可以查看分布式情况下所有爬虫日志,查看爬虫执行情况等功能. 二 安装 部署 安装环境 ...