js实现文件上传功能 后台使用MultipartFile


Posted in Javascript onSeptember 08, 2018

本文为大家分享了js实现文件上传功能的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>XMLHttpRequest上传文件</title>
  <script type="text/javascript">
    //图片上传
    var xhr;
    //上传文件方法
    function UpladFile() {
      var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
      var url = "http://localhost:8080" + "/api/attachment/upload"; // 接收上传文件的后台地址
 
      var form = new FormData(); // FormData 对象
      form.append("file", fileObj); // 文件对象
 
      xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
      xhr.open("post", url, true); //post方式,url为服务器请求地址,true 该参数规定请求是否异步处理。
      xhr.onload = uploadComplete; //请求完成
      xhr.onerror = uploadFailed; //请求失败
 
      xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
      xhr.upload.onloadstart = function(){//上传开始执行方法
        ot = new Date().getTime();  //设置上传开始时间
        oloaded = 0;//设置上传开始时,以上传的文件大小为0
      };
 
      xhr.send(form); //开始上传,发送form数据
    }
 
    //上传成功响应
    function uploadComplete(evt) {
      //服务断接收完文件返回的结果
 
      var data = JSON.parse(evt.target.responseText);
      if(data.success) {
        alert("上传成功!");
      }else{
        alert("上传失败!");
      }
 
    }
    //上传失败
    function uploadFailed(evt) {
      alert("上传失败!");
    }
    //取消上传
    function cancleUploadFile(){
      xhr.abort();
    }
 
 
    //上传进度实现方法,上传过程中会频繁调用该方法
    function progressFunction(evt) {
      var progressBar = document.getElementById("progressBar");
      var percentageDiv = document.getElementById("percentage");
      // event.total是需要传输的总字节,event.loaded是已经传输的字节。如果event.lengthComputable不为真,则event.total等于0
      if (evt.lengthComputable) {//
        progressBar.max = evt.total;
        progressBar.value = evt.loaded;
        percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
      }
      var time = document.getElementById("time");
      var nt = new Date().getTime();//获取当前时间
      var pertime = (nt-ot)/1000; //计算出上次调用该方法时到现在的时间差,单位为s
      ot = new Date().getTime(); //重新赋值时间,用于下次计算
      var perload = evt.loaded - oloaded; //计算该分段上传的文件大小,单位b
      oloaded = evt.loaded;//重新赋值已上传文件大小,用以下次计算
      //上传速度计算
      var speed = perload/pertime;//单位b/s
      var bspeed = speed;
      var units = 'b/s';//单位名称
      if(speed/1024>1){
        speed = speed/1024;
        units = 'k/s';
      }
      if(speed/1024>1){
        speed = speed/1024;
        units = 'M/s';
      }
      speed = speed.toFixed(1);
      //剩余时间
      var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1);
      time.innerHTML = ',速度:'+speed+units+',剩余时间:'+resttime+'s';
      if(bspeed==0) time.innerHTML = '上传已取消';
    }
  </script>
</head>
<body>
<progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>
<span id="percentage"></span><span id="time"></span>
<br /><br />
<input type="file" id="file" name="myfile" />
<input type="button" onclick="UpladFile()" value="上传" />
<input type="button" onclick="cancleUploadFile()" value="取消" />
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
最近项目写了一些js,水平有待提高
Jan 31 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
利用JavaScript检测CPU使用率自己写的
Mar 22 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
webpack3之loader全解析
Oct 26 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 Javascript
理解JavaScript中的对象
Aug 25 Javascript
vue-router的HTML5 History 模式设置
Sep 08 #Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 #Javascript
react 父子组件之间通讯props
Sep 08 #Javascript
js代码规范之Eslint安装与配置详解
Sep 08 #Javascript
vue弹窗插件实战代码
Sep 08 #Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 #Javascript
详解Webpack-dev-server的proxy用法
Sep 08 #Javascript
You might like
一些 PHP 管理系统程序中的后门
2009/08/05 PHP
php轻松实现文件上传功能
2016/03/03 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
Python实现的微信公众号群发图片与文本消息功能实例详解
2017/06/30 Python
python绘制热力图heatmap
2020/03/23 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
数字漫画:comiXology
2020/06/13 全球购物
计算s=f(f(-1.4))的值
2014/05/06 面试题
运动会广播稿200米
2014/01/27 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
手残删除python之后的补救方法
2021/06/26 Python
html5调用摄像头实例代码
2021/06/28 HTML / CSS
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers