文档章节

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

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

共有 人打赏支持
孟飞阳
粉丝 202
博文 921
码字总数 537449
作品 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
15个提高编程技巧的JavaScript工具

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

IanSun
2015/03/14
0
0
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
Spring中formdata方式提交json对象和file之一

问题 想使用vue-resource表单提交方式到spring,这个表单中包含json对象和file对象。 思路 将json对象和file对象都放到表单提交方式里面的中,并在中指定内容格式。 步骤 Spring实现和配置 ...

亚林瓜子
06/12
0
0
struts2 用iframe 做个无刷新上传文件例子(一)

用Iframe来实现无刷新文件上传的注意点 1. 页面需要放一个iframe,并隐藏,然后让上传页面表单的target指定到这个iframe 2. struts2里面,中文文件编码处理,可以在配置文件,也可以在actio...

james_you
2014/04/26
0
0
客户端上传工具-SWFUpload

最近,在后台实现广告管理系统,有一个表单选项,想利用SWFUpload组件来实现。现在将该组件的认识和理解记录如下:方便有需要的同行查看. 一、首先来比较下目前的几种的客户端上传: 1、File表...

王锐
2012/09/18
0
0
使用JCplayer在自己的网站上播放视频

在个人网站上放一两段视频早已经不是什么新鲜事了,最简单的办法就是把视频传到youku/爱奇艺/土豆等等视频分享网站,通过审核并发布,选分享,之后会得到一端代码,把代码放进自己的网页htm...

路过暴风
2014/01/22
0
0
ajax iframe无刷新上传文件

首先要说的就是 ajax 是无法实现上传文件的,可以想一下ajax与后台通信都是通过传递字符串,怎么能传递文件呢?其实出于安全考虑js是不能操作文件的,所以就不要再说用ajax来实现文件的上传了...

别人说我名字很长
2014/03/22
0
0
【完全跨域】异步上传文件并获得返回值

【完全跨域】异步上传文件并获得返回值 作者:php-note.com 发布于:2015-03-01 10:58 分类:JS/jQuery 浏览(595) AJAX可以进行数据的异步请求,但对于文件和跨域问题却束手无策。 Jsonp可以...

蜗牛奔跑
2015/11/02
0
1
异步上传文件并获得返回值(完全跨域)

异步上传文件并获得返回值(完全跨域) AJAX可以进行数据的异步请求,但对于文件和跨域问题却束手无策。 Jsonp可以进行跨域数据的异步请求,但同样不能使用于文件。 <form>表单可以进行跨域数...

跑龙套
2014/03/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Git 基础 - 远程仓库的使用

远程仓库的使用 要参与任何一个 Git 项目的协作,必须要了解该如何管理远程仓库。远程仓库是指托管在网络上的项目仓库,可能会有好多个,其中有些你只能读,另外有些可以写。同他人协作开发某...

谢思华
9分钟前
0
0
面试宝典-悲观锁和乐观锁

悲观锁(Pessimistic Lock), 顾名思义,就是很悲观,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会block直到它拿到锁。 乐观锁(Optimistic...

suyain
10分钟前
0
0
崛起于Springboot2.X之集成MongoDb使用mongoTemplate CRUD(27)

1、pom依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.7</version></dependency><dependency> <groupId>log4j</......

木九天
21分钟前
0
0
切分log日志

新建logback.xml放到resource里面 <?xml version="1.0" encoding="utf-8"?><configuration> <appender name="consoleLog" class="ch.qos.logback.core.ConsoleAppender"> <......

talen
26分钟前
0
0
spring @Resource 和 @Autowired 的使用区别

这两个 注解 @Resource 和 @Autowired , 常识都知道 @Resource 是 JAVAEE 自带的,@Autowired 是 spring 的自定义注解。 一般情况下, 使用 bean的时候, 这两个注解 随便使用一个即可。 但...

之渊
31分钟前
0
0
springboot集成elasticsearch客户端问题记录

1背景说明 服务端ES版本为5.5.2,springboot版本为1.5.6。 工程中添加如下依赖 2问题记录 2.1 NetworkPlugin类找不到 报错java.lang.ClassNotFoundException: org.elasticsearch.plugins.Net...

zjg23
33分钟前
1
0
快速构建ceph可视化监控系统

前言 ceph的可视化方案很多,本篇介绍的是比较简单的一种方式,并且对包都进行了二次封装,所以能够在极短的时间内构建出一个可视化的监控系统 本系统组件如下: ceph-jewel版本 ceph_expor...

万建宁
33分钟前
0
0
Java构造器使用注意

public class 父类A {int age = 10;protected void say() {System.out.println("父类A");}public 父类A() {override();}public void override() {Syst...

咸鱼AI
33分钟前
0
0
TensorFlow 线性分类

构造直线 z = 2 * x - 3 * y + 4 x0*w0+x1*w1+b=0 x1=-x0* w0/w1-b/w1 斜率 k= -w0/w1 截距 -b/w1 随机生成数据,加入一定的偏差,用直线将二维平面分为两部分 使用线性模型拟合参数 损失函数...

阿豪boy
36分钟前
0
0
翻译冒泡排序测试

翻译一个冒泡排序: var a = [1,3,2,4,6,5];var f = 0;var n = a.length ;for( var i =1; i<= n; i++) { for( var j = n-1 ; j >= i; j --) { if(a[j] < a[j+1]) { ......

钟元OSS
38分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部