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 相关文章推荐
JavaScript 程序编码规范
Nov 23 Javascript
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
Nov 22 Javascript
vue-cli webpack配置文件分析
May 20 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 Javascript
JS实现网页时钟特效
Mar 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
提取HTML标签
2006/10/09 PHP
用PHP+MySql编写聊天室
2006/10/09 PHP
php上传、管理照片示例
2006/10/09 PHP
PHP静态类
2006/11/25 PHP
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
Mootools 1.2教程 类(一)
2009/09/15 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
node.js中的fs.chmod方法使用说明
2014/12/18 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
ET Mall东森购物网:东森严选
2017/03/06 全球购物
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
一些PHP的面试题
2015/05/06 面试题
医学护理系毕业生求职信
2013/10/01 职场文书
师范应届生语文教师求职信
2013/10/29 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
防溺水主题班会教案
2015/08/12 职场文书
中国古风插画师排行榜:夏达第一,第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫