本文转自：91博客；原文地址：http://www.9191boke.com/988405084.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>XMLHttpRequest上传文件</title>
  6.     <script type="text/javascript">
  7.         //图片上传
  8.         var xhr;
  9.         //上传文件方法
  10.         function UpladFile() {
  11.             var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
  12.             var url =  "http://localhost:8080" + "/api/attachment/upload"; // 接收上传文件的后台地址
  13.  
  14.             var form = new FormData(); // FormData 对象
  15.             form.append("file", fileObj); // 文件对象
  16.  
  17.             xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
  18.             xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
  19.             xhr.onload = uploadComplete; //请求完成
  20.             xhr.onerror =  uploadFailed; //请求失败
  21.  
  22.             xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
  23.             xhr.upload.onloadstart = function(){//上传开始执行方法
  24.                 ot = new Date().getTime();   //设置上传开始时间
  25.                 oloaded = 0;//设置上传开始时，以上传的文件大小为0
  26.             };
  27.  
  28.             xhr.send(form); //开始上传，发送form数据
  29.         }
  30.  
  31.         //上传成功响应
  32.         function uploadComplete(evt) {
  33.             //服务断接收完文件返回的结果
  34.  
  35.             var data = JSON.parse(evt.target.responseText);
  36.             if(data.success) {
  37.                 alert("上传成功！");
  38.             }else{
  39.                 alert("上传失败！");
  40.             }
  41.  
  42.         }
  43.         //上传失败
  44.         function uploadFailed(evt) {
  45.             alert("上传失败！");
  46.         }
  47.         //取消上传
  48.         function cancleUploadFile(){
  49.             xhr.abort();
  50.         }
  51.  
  52.         //上传进度实现方法，上传过程中会频繁调用该方法
  53.         function progressFunction(evt) {
  54.             var progressBar = document.getElementById("progressBar");
  55.             var percentageDiv = document.getElementById("percentage");
  56.             // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
  57.             if (evt.lengthComputable) {//
  58.                 progressBar.max = evt.total;
  59.                 progressBar.value = evt.loaded;
  60.                 percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
  61.             }
  62.             var time = document.getElementById("time");
  63.             var nt = new Date().getTime();//获取当前时间
  64.             var pertime = (nt-ot)/1000; //计算出上次调用该方法时到现在的时间差，单位为s
  65.             ot = new Date().getTime(); //重新赋值时间，用于下次计算
  66.             var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b
  67.             oloaded = evt.loaded;//重新赋值已上传文件大小，用以下次计算
  68.             //上传速度计算
  69.             var speed = perload/pertime;//单位b/s
  70.             var bspeed = speed;
  71.             var units = 'b/s';//单位名称
  72.             if(speed/1024>1){
  73.                 speed = speed/1024;
  74.                 units = 'k/s';
  75.             }
  76.             if(speed/1024>1){
  77.                 speed = speed/1024;
  78.                 units = 'M/s';
  79.             }
  80.             speed = speed.toFixed(1);
  81.             //剩余时间
  82.             var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1);
  83.             time.innerHTML = '，速度：'+speed+units+'，剩余时间：'+resttime+'s';
  84.             if(bspeed==0) time.innerHTML = '上传已取消';
  85.         }
  86.     </script>
  87. </head>
  88. <body>
  89. <progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>
  90. <span id="percentage"></span><span id="time"></span>
  91. <br /><br />
  92. <input type="file" id="file" name="myfile" />
  93. <input type="button" onclick="UpladFile()" value="上传" />
  94. <input type="button" onclick="cancleUploadFile()" value="取消" />
  95. </body>
  96. </html>

纯js实现最简单的文件上传(后台使用MultipartFile)的更多相关文章

  1. 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法（转载） IEnumerable,ICollection,IList接口问题 不吹不擂，你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理

    服务器文档下载zip格式   刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...

  2. node.js使用express框架进行文件上传

    关于node.js使用express框架进行文件上传,主要来自于最近对Settings-Sync插件做的研究.目前的研究算是取得的比较好的进展.Settings-Sync中通过快捷键上传文件,其实主要 ...

  3. 使用jsp/servlet简单实现文件上传与下载

    使用JSP/Servlet简单实现文件上传与下载    通过学习黑马jsp教学视频,我学会了使用jsp与servlet简单地实现web的文件的上传与下载,首先感谢黑马.好了,下面来简单了解如何通过使用 ...

  4. Django 实现简单的文件上传

    今天分享一下Django实现的简单的文件上传的小例子. 步骤 创建Django项目,创建Django应用 设计模型 处理urls.py 以及views.py 设计模板,设计表单 运行项目,查看数据库 ...

  5. Bootstrap fileinput.js，最好用的文件上传组件

    本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo   二.插件引入 <link ty ...

  6. DVWA靶机--简单的文件上传漏洞

    简单的文件上传漏洞(靶机安全级别:low) 事先准备好一句话木马,密码为pass 上传一句话木马,显示上传路径(一般网站是不会显示路径的,这里靶机为了方便你测试漏洞,直接显示出了路径: ../../h ...

  7. Java实现一个简单的文件上传案例

    Java实现一个简单的文件上传案例 实现流程: 1.客户端从硬盘读取文件数据到程序中 2.客户端输出流,写出文件到服务端 3.服务端输出流,读取文件数据到服务端中 4.输出流,写出文件数据到服务器硬盘 ...

  8. node.js系列（实例）：原生node.js+formidable模块实现简单的文件上传

    /** * 原生node.js结合formidable模块实现图片上传改名 * @Author:Ghost * @Date:2016/07/15 * @description: * 1.引入模块htt ...

  9. js实现简单的文件上传

    文件下载:https://www.cnblogs.com/xiaomili/p/10521160.html  html: <form name="form1" id=&quo ...

随机推荐

  1. win8共享文件设置 详细教程

    1.开放防火墙445端口 2.进入组策略,依次进入 从网络访问计算机 属性里--添加-Guest 3.进入 然后把里面的用户清空 4.打开网络和共享中心,关闭密码保护共享

  2. JS实现文本框和文本域获取焦点focus()时，光标在本文的末尾

    <!-- <input type="text" id="test1" name="test1" value="test ...

  3. C盘空间不够，清除VS下的 Font Cache

    C盘空间老是不够用.清除Font Cache 1.在 C:\Users\Jimmy\AppData\Local\Microsoft\Visual Studio 下的  Font Cache 目录可以干 ...

  4. python dataframe (method,partial,dir,hasattr,setattr,getarrt)

    # * _*_ coding:utf-8 _*___author__:'denny 20170730'from functools import reduceimport functoolsimpor ...

  5. Wince/VC高效PNG贴图，自定义Alpha算法

    工作中,做一些炫点的界面都需要用到PNG图片,Wince里面微软也提供了PNG图片的支持,不过Alpha的混合速度比较慢,所以自己实现了一个Alpha的混合运算接口,经过测试,要比微软AlphaBle ...

  6. spark 数据倾斜的一些表现

    spark 数据倾斜的一些表现 https://yq.aliyun.com/articles/62541

  7. InstallShield脚本事件

    脚本事件主要有三大类:Before Move Data(安装数据前).Move Data(安装数据过程中).After Move Data(安装数据后). OnBegin:在初始化后,被调用 OnFi ...

  8. Feign从配置文件中读取url

    Feign的url和name都是可配置的,就是从配置文件中读取的属性值,然后用占位符引用就可以了: ${rpc.url} @FeignClient(name = "me", url ...

  9. Java 9中的 9个 新特性

    Java 9 中的 9个 新特性 java 7 2011发布,Java 8 2014发布,java9发布于2017年9月21日. 你可能已经听说过 Java 9 的模块系统,但是这个新版本还有许多其它 ...

  10. SQL SERVER 事务和锁

    内容皆整理自网络 一.事务 作者:郭无心链接:https://www.zhihu.com/question/31346392/answer/59815366来源:知乎著作权归作者所有.商业转载请联系作 ...