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 相关文章推荐
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
jQuery获取浏览器中的分辨率实现代码
Apr 23 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
动态加载js的方法汇总
Feb 13 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 Javascript
javascript中对变量类型的判断方法
Aug 09 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
浅析Node.js非对称加密方法
Jan 29 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
JS面向对象之单选框实现
Jan 17 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反向代理类代码
2014/08/15 PHP
javascript学习网址备忘
2007/05/29 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
浅谈js闭包理解
2019/03/28 Javascript
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
Python中import机制详解
2017/11/14 Python
python实现BackPropagation算法
2017/12/14 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
印尼旅游网站:via
2017/11/12 全球购物
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
公司授权委托书
2014/04/04 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
知识改变命运演讲稿
2014/05/21 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
小学数学课题方案
2014/06/15 职场文书
大学专科自荐信
2014/06/17 职场文书
化验室岗位职责
2015/02/14 职场文书
食品药品安全责任书
2015/05/11 职场文书
辞职信怎么写?
2019/05/21 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python
MongoDB支持的数据类型
2022/04/11 MongoDB