1、springmvc支持文件上传，需要在spring-mvc.xml配置文件中加上下面的一段话：

<!-- 支持上传文件 -->

    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>

2、下面介绍下XMLHttpRequest2.0

　　最早，微软在IE 5引进了这个接口。因为它太有用，其他浏览器也模仿部署了，ajax操作因此得以诞生。

　　但是，这个接口一直没有标准化，每家浏览器的实现或多或少有点不同。HTML 5的概念形成后，W3C开始考虑标准化这个接口。2008年2月，就提出了XMLHttpRequest Level 2 草案。

这个XMLHttpRequest的新版本，提出了很多有用的新功能，将大大推动互联网革新。本文就对这个新版本进行详细介绍。

　　老版本的XMLHttpRequest对象有以下几个缺点：

　　　　* 只支持文本数据的传送，无法用来读取和上传二进制文件。

　　　　* 传送和接收数据时，没有进度信息，只能提示有没有完成。

　　　　* 受到"同域限制"（Same Origin Policy），只能向同一域名的服务器请求数据

　　新版本的XMLHttpRequest对象，针对老版本的缺点，做出了大幅改进：　　　

　　　　* 可以设置HTTP请求的时限。

　　　　* 可以使用FormData对象管理表单数据。

　　　　* 可以上传文件。

　　　　* 可以请求不同域名下的数据（跨域请求）。

　　　　* 可以获取服务器端的二进制数据。

　　　　* 可以获得数据传输的进度信息。

　　新版XMLHttpRequest对象，不仅可以发送文本信息，还可以上传文件。假定files是一个"选择文件"的表单元素（input[type="file"]），我们将它装入FormData对象。

var formData = new FormData();

for (var i = 0; i < files.length;i++) {

　　formData.append('files[]', files[i]);

}

　　然后，发送这个FormData对象

xhr.send(formData);

3、代码实现

废话不多说，上代码：

前端页面代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>XMLHttpRequest上传文件进度实现</title>

    <script type="text/javascript">

    var xhr;

    var ot; //

    var oloaded;

    //上传文件方法

    function UpladFile() {

        var fileObj = document.getElementById("uploadForm"); // js 获取文件对象

        var url = "http://192.168.0.116:8080/partnersys/service/uploadFile"; // 接收上传文件的后台地址 

        var form = new FormData(fileObj); // FormData 对象

        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 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 = '上传已取消';

    }

    //上传成功响应

    function uploadComplete(evt) {

        //服务断接收完文件返回的结果

        //    alert(evt.target.responseText);

        alert("上传成功！");

    }

    //上传失败

    function uploadFailed(evt) {

        alert("上传失败！");

    }

    //取消上传

    function cancleUploadFile() {

        xhr.abort();

    }

    </script>

</head>

<body>

    <progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>

    <span id="percentage"></span><span id="time"></span>

    <br />

    <br />

    <form id="uploadForm" method="post" enctype="multipart/form-data">

        <input type="file" id="file" name="myfile" /><!-- input标签的name属性用于post传输，作为表单的键值，后台通过键值获取序列化后的表单数据。name属性值和springmvc中的“@RequestParam(value = "myfile", required = true)”的value值相同，通过该值反序列化成springmvc的MultipartFile对象 -->

        <input type="button" onclick="UpladFile()" value="上传" />

        <input type="button" onclick="cancleUploadFile()" value="取消" />

    </form>

</body>

</html>

　后端java代码：

@RequestMapping(value = "/uploadFile",method = RequestMethod.POST)

	public void upload(@RequestParam(value = "myfile", required = true) MultipartFile file, HttpServletRequest request,

			HttpServletResponse response)

	{

		String path = request.getSession().getServletContext().getRealPath("uploadFile");

		String fileName = file.getOriginalFilename();

		System.out.println("文件上传路径为：" + path);

		File targetFile = new File(path, fileName);

		if (!targetFile.exists())

		{

			targetFile.mkdirs();

		}

		// 保存

		try

		{

			file.transferTo(targetFile);

		}

		catch (Exception e)

		{

			e.printStackTrace();

		}

	}

　　

　　

spring mvc + xmlHttpRequest2.0 实现无刷新上传文件，带进度条和剩余时间的更多相关文章

  1. jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟

    在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...

  2. .net MVC借助Iframe实现无刷新上传文件

    html: <div id="uploadwindow" style="display: none;"> <form action=" ...

  3. asp.net mvc 实现上传文件带进度条

    本文乃是博主早期写的,此种思路虽然实现了,但固然不是最好的,仅做参考学习. 可以用js onprogress .fileinput .webuploader.jq ajaxsubmit等实现 思路:a ...

  4. Extjs 使用fileupload插件上传文件 带进度条显示

    一.首先我们看看官方给出的插件的解释: 一个文件上传表单项具有自定义的样式,并且可以控制按钮的文本和 像文本表单的空文本类似的其他特性. 它使用一个隐藏的文件输入元素,并在用户选择文件后 在form提 ...

  5. FormData上传文件 带进度条

    * jQuery ajax  FormData 上传文件 template $.ajax({ url: url, type: 'POST', data: new FormData(form), dat ...

  6. ASP.NET Jquery+ajax上传文件(带进度条)

    效果图 支持ie6+,chrome,ie6中文文件名会显示乱码. 上传时候会显示进度条. 需要jquery.uploadify.js插件,稍后会给出下载 前台代码 <%@ Page Langua ...

  7. $_FILES参数详解及简单<form>表单无刷新上传文件

    $_FILES:经由 HTTP POST 文件上传而提交至脚本的变量,类似于旧数组$HTTP_POST_FILES 数组(依然有效,但反对使用)详细信息可参阅 POST方法上传 $_FILES数组内容 ...

  8. jQuery+php+ajax实现无刷新上传文件功能

    jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码 <script type='text/javascript' src='j ...

  9. ajax ＋jsp＋iframe无刷新上传文件[转]

    http://hi.baidu.com/zj360202/blog/item/f23e3711f929c774cb80c475.html ajax jsp 无刷新上传文件 2009-10-26 16: ...

随机推荐

  1. IDEA 2018.1可用License服务（持续更新）

    1. http://idea.congm.in 2.http://idea.toocruel.net

  2. 【leetcode】LCP 1. Guess Numbers

    题目如下: 小A 和 小B 在玩猜数字.小B 每次从 1, 2, 3 中随机选择一个,小A 每次也从 1, 2, 3 中选择一个猜.他们一共进行三次这个游戏,请返回 小A 猜对了几次? 输入的gues ...

  3. Dw 表单制作 与 dedecms 结合实现提交效果

    Dw 表单制作 与 dedecms 结合实现提交效果 自定义表单的用处 1.教育类网站的学员报名 2.企业网站的在线订单 3.普通网页上的一些和用户交互的小功能 实现原理:首先添加表单:核心-频道模型 ...

  4. Android图片优化指南

    图片作为内存消耗大户,一直是开发人员尝试优化的重点对象.Bitmap的内存从3.0以前的位于native,到后来改成jvm,再到8.0又改回到native.fresco花费很多精力在5.0系统之前把B ...

  5. 【Leetcode】二叉树的层次遍历

    题目: 给定一个二叉树,返回其节点值自底向上的层次遍历. (即按从叶子节点所在层到根节点所在的层,逐层从左向右遍历) 例如: 思路:采用宽度优先搜索. 时间复杂度:O(n).n为节点的数量,遍历所有节 ...

  6. Eclipse怎样对项目进行重命名？

    当创建一个项目时,可能会随便命名一个项目名,如果想要项目名更有意义,或者为了方便后续项目的命名,怎么重命名项目名呢? 第一步在我们的电脑打开eclipse软件,找到需要重命名的项目,如下图所示: 第二 ...

  7. Ambari 2.6.0 HDP 2.6.3集群搭建

    1.安装环境说明 三台机器安装好CentOS-7-x86_64-Minimal-1708.iso 下载地址:https://www.centos.org/download/ 最好在安装时设置好IP和H ...

  8. Oracle开发：常用的数据库字段类型[转]

    Oracle常用的数据库字段类型如下: 字段类型 中文说明 限制条件 其它说明 CHAR 固定长度字符串 最大长度2000 bytes VARCHAR2 可变长度的字符串 最大长度4000 bytes ...

  9. bash中的set, env, export unset的区别

    参考这篇文章很好 参考这篇文章2 -------------------------- == set显示的是当前shell的变量, 不同的shell, 它的私有变量是不同的 env是显示用户的变量, ...

  10. ES6中let和var的区别

    通过var定义的变量,作用域是整个封闭函数,是全域的 .通过let定义的变量,作用域是在块级或是子块中. 变量提升现象:浏览器在运行代码之前会进行预解析 -不论var声明的变量处于当前作用域的第几行, ...