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关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
Javascript 中 null、NaN和undefined的区别总结
Apr 10 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
微信小程序模板(template)使用详解
Jan 31 Javascript
React Navigation 使用中遇到的问题小结
May 08 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 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
将OICQ数据转成MYSQL数据
2006/10/09 PHP
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
python操作xml文件示例
2014/04/07 Python
python实现感知器
2017/12/19 Python
在python中求分布函数相关的包实例
2020/04/15 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
virtualenv介绍及简明教程
2020/06/23 Python
python中random模块详解
2021/03/01 Python
Born鞋子官网:Born Shoes
2017/04/06 全球购物
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
当当网软件测试笔试题
2015/11/24 面试题
自我鉴定范文
2013/11/10 职场文书
保安员岗位职责
2013/11/17 职场文书
北体毕业生求职信
2014/02/28 职场文书
影子教师研修方案
2014/06/14 职场文书
2015年统战工作总结
2015/05/19 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
Python加密技术之RSA加密解密的实现
2022/04/08 Python