这是很简单。。

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. 【2017-05-25】WebForm母版页

    母版页:可以把界面的部分代码进行重用 添加新项-母版页 在母版页中界面代码不要写在 <asp:ContentPlaceHolder ID="head" runat=" ...

  2. VR上天了!全景商业化落地了!——VR全景智慧城市

    几年前,VR创业公司SpaceVR就启动了旨在将宇航员视觉体验带给普通人的虚拟现实(VR)项目.SpaceVR计划将VR相机卫星送入太空,并将相机拍摄到的太空视频发送回地球,从而让VR用户身临其境地看 ...

  3. 浅谈C语言指针

    下面就几种情况讨论指针. 一.指针和变量 变量是存储空间的别名,访问形式是直接访问. 指针访问内存地址是间接访问. 使用指针访问内存的场合:1.局部变量,参数传递    2.动态分配内存 指针本身也是 ...

  4. MySQL目录结构和简单指令

    1.MySQL目录结构 了解每个软件的安装目录下,每个文件夹下文件的类型和功能是有必要的,这可以方便我们直接进行软件配置和某些参数的修改. 2.简单指令 进入cmd后可以直接操作的命令 1)启动MyS ...

  5. 一天搞定CSS: 标签样式初始化(CSS reset)及淘宝样式初始化代码--09

    样式初始化:是指对HTML中某些标签的默认样式进行清除 样式初始化目的: 不同浏览器的默认样式不一样,若不清理,会导致相同的代码在浏览器中解析结果不一样,为了避免这种情况,所以需要进行样式初始化. 代 ...

  6. Asp.Net页面传值的方法简单总结【原创】

    1.QueryString 当页面上form按照get的方式向页面发送请求数据的时候,web server会将请求数据放入 一个QEURY_STRING的环境变量中,然后通过QeueryString方 ...

  7. 文件快速删除工具, 解决你的node_modules

    摘要: 还在为删除文件慢烦恼吗?强大工具dlf来帮助你.作为一名前端开发,最常见的就是node_modules,如果dependencies很多,osx系统删除还好,Windows用户就麻烦了.本文分 ...

  8. java基础之IO篇

    IO流 在计算机中的流是有方向的即为IO流,分为输入流和输出流,他们的方向都是以服务的方向为主,向服务器中发送指令等等就是输出流,服务器给出的反应等等,我们都说为输出流. 字节流 字符流 输入流 In ...

  9. C# 调用cmd.exe的方法

    网上有很多用C#调用cmd的方法,大致如下: [c-sharp] view plaincopy private void ExecuteCmd(string command)   {   Proces ...

  10. v9 调用模型中新增的字段

    在模型中新增字段的时候,可以选择“是否为主表”. 若选是,则前台调用可直接通过字段名调用. 若选否,在前台调用是应在{pc:content}中添加 moreinfo="1",表示允 ...