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. 【leetcode】Max Area of Island

    国庆中秋长假过完,又要开始上班啦.先刷个题目找找工作状态. Given a non-empty 2D array grid of 0's and 1's, an island is a group o ...

  2. 类型xxx 无法反序列化。缺乏对应的数据成员。

    WebApi——json返回多了 k_BackingField   产生原因: model类添加了    [System.Serializable] 返回json的时候会出现.

  3. end of sleepyhead

  4. 51Nod 1413 权势二进制 (思维)

    题意 : 一个十进制整数被叫做权势二进制, 当他的十进制表示的时候只由0或1组成.例如0, 1, 101, 110011都是权势二进制而2, 12, 900不是.当给定一个n (1<=n< ...

  5. Sql 中的as是什么意思 + 无列名注入解析

    相当于取别名 这里结合一下无列名注入的知识点: 这种方法在第十届SWPUCTF的web1——广告招租里考到了:

  6. NOIP2018复赛游记

    Day -oo (这里是负无穷啦qwq) 为了NOIP2018,我已经准备了好久 暑假的封闭式训练,国庆后停掉了晚自习,距NOIP一周时更是停掉了全天的课...... 我像是一个圆,在近乎无限的空间里 ...

  7. Factory Kit【其他模式】

    Factory Kit public class FactoryKit { /** * Factory Kit:它定义了一个包含不可变内容的工厂,并使用独立的构建器和工厂接口来处理对象的创建. */ ...

  8. 网站模板-AdminLTE：AdminLTE

    ylbtech-网站模板-AdminLTE:AdminLTE 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 1. https://adminlte.io/ 1. ...

  9. 有关MSSQL2000在Win7上的安装

    https://baijiahao.baidu.com/s?id=1593533837896849226&wfr=spider&for=pc 怎么在win7下安装sql server2 ...

  10. 阶段3 1.Mybatis_01.Mybatis课程介绍及环境搭建_03.jdbc操作数据库的问题分析

    分析一段代码,传统的jdbc的功能,最终要实现的功能就是sql语句.