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. 数据结构——Bloom Filter

    1. 一个很长的二进制向量和一个映射函数 2.用于检索一个元素是否在集合中,但有一定的错误概率:通过BloomFilter的元素不一定在集合当中,但是不通过BloomFilter的元素一定不在集合当中 ...

  2. Python 日期和时间Ⅱ

    获取某月日历 Calendar模块有很广泛的方法用来处理年历和月历,例如打印某月的月历: 以上实例输出结果: Time 模块 Time 模块包含了以下内置函数,既有https://www.xuanhe ...

  3. Mybatis mysql 一个搜索框多个字段模糊查询 几种方法

    第一种 or 根据搜索框给定的关键词,模糊搜索用户名和账号都匹配的用户集合 <select id="list" parameterType="com.user.Us ...

  4. vertical-greenplum

    https://github.com/sumitchawla/docker-vertica You can either pull the image from Docker Registry usi ...

  5. ubuntu 微信安装

    安装过程: 下载最新版本tar.gz压缩包https://github.com/geeeeeeeeek/electronic-wechat/releases/download/V2.0/linux-x ...

  6. hdu_3466(01背包)

    其实,就是让C商品的q不等于p,其他都相同,这时,你就会发现如果要买C商品的话,肯定得先买C商品,因为买C商品的代价最大.所以,我们可以按照qi-pi的顺序来确定大顺序.这里我们还可以用更严谨的方式来 ...

  7. Android视频处理 --处理视频第一帧缩略图

    从API 8开始,新增了一个类: android.media.ThumbnailUtils这个类提供了3个静态方法一个用来获取视频第一帧得到的Bitmap,2个对图片进行缩略处理. ? 1 publi ...

  8. 网络对抗技术 20165220 Exp7 网络欺诈防范

    网络对抗技术 20165220 Exp7 网络欺诈防范 实验任务 (1)简单应用SET工具建立冒名网站 (1分) (2)ettercap DNS spoof (1分) (3)结合应用两种技术,用DNS ...

  9. 总结 webpack 的插件

    模块化第一步  初始化 package.json 文件 node.js 指令 npm init npm的官网:https://www.npmjs.com/ 搜索插件名,查看插件的用法 1. webpa ...

  10. LeetCode_1114.按顺序打印（多线程）

    LeetCode_1114 LeetCode-1114.按顺序打印 我们提供了一个类: public class Foo { public void one() { print("one&q ...