文档章节

纯js实现最简单的文件上传(后台使用MultipartFile)

孟飞阳
 孟飞阳
发布于 06/19 16:10
字数 561
阅读 40
收藏 0
<!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>

 

本文转载自:https://www.cnblogs.com/007sx/p/7520529.html

共有 人打赏支持
孟飞阳
粉丝 206
博文 971
码字总数 544356
作品 5
朝阳
个人站长
私信 提问
springmvc+uploadify3.2.1完整代码示例,java,jsp

前台页面: 引入js和css<script type="text/javascript" src="${STATICFILEPATH}/js/jquery/jquery-1.10.js${STATICFILEVERSION}"></script> <link type="text/css" rel="stylesheet" href=......

满风
2014/10/15
0
6
angularjs 上传功能的实现

html: <script type="text/javascript" src="js/angular-file-upload.min.js"></script> <img id="photo" src="" style="height: 60px; width: 60px;"> <span class="span3" data-type="logo......

wsblk
2015/08/07
0
0
15个提高编程技巧的JavaScript工具

JavaScript脚本库是一个预先用JavaScript语言写好的库,它方便了我们开发基于JavaScript的应用程序,特别适合AJAX和其他一些以Web为中心的技术。JavaScript主要用于编写嵌入或者包含在HTML页...

IanSun
2015/03/14
0
0
uploadify 实现文件上传

uploadify官网我们需要到官网上下载需要的插件引入到项目中,同时我们最好看看uploadify的中文文档,当然直接把下面的代码复制作为一个工具类也行,反正都是大同小异. 如何实现图片上传功能? 在...

coderzs
2017/10/07
0
0
multiple web workers的实现

multiple web workers的实现 maxWorkers : (window.navigator && window.navigator.hardwareConcurrency) || 3,minWorkers : 1} }) {return new worker(config);}getWorker(id) // 查getIdle......

请叫我小飞鹅
10/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring应用学习——AOP

1. AOP 1. AOP:即面向切面编程,采用横向抽取机制,取代了传统的继承体系的重复代码问题,如下图所示,性能监控、日志记录等代码围绕业务逻辑代码,而这部分代码是一个高度重复的代码,也就...

江左煤郎
今天
3
0
eclipse的版本

Eclipse各版本代号一览表 Eclipse的设计思想是:一切皆插件。Eclipse核心很小,其它所有功能都以插件的形式附加于Eclipse核心之上。 Eclipse基本内核包括:图形API(SWT/Jface),Java开发环...

mdoo
今天
1
0
SpringBoot源码:启动过程分析(一)

本文主要分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 还是老套路,先把分析过程的时序图摆出来:时序图-SpringBoot2.10启动分析 二.源码分析 首...

Jacktanger
今天
3
0
小白带你认识netty(二)之netty服务端启动(上)

上一章 中的标准netty启动代码中,ServerBootstrap到底是如何启动的呢?这一章我们来瞅下。 server.group(bossGroup, workGroup);server.channel(NioServerSocketChannel.class).optio...

天空小小
今天
3
0
聊聊storm trident batch的分流与聚合

序 本文主要研究一下storm trident batch的分流与聚合 实例 TridentTopology topology = new TridentTopology(); topology.newStream("spout1", spout) .p......

go4it
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部