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. shiro框架学习-7- Shiro权限控制注解和编程方式

    讲解权限角色控制 @RequiresRoles, @RequiresPermissions等注解的使用和编程式控制 配置文件的方式 使用ShiroConfig 注解方式 @RequiresRoles( ...

  2. strcat()与strcpy()用法

    1.strcpy (1)原型 extern char *strcpy(char *dest,char *src); (2)用法 #include <cstring> (3)功能 把src所 ...

  3. luogu P2661 信息传递 x

    P2661 信息传递 题目描述 有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为i的同学的信息传递对象是编号为Ti同学. 游戏开始时,每人都只知 ...

  4. 【Leetcode】买卖股票-贪心算法

    题目: 给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你可以尽可能地完成更多的交易(多次买卖一支股票). 注意:你不能同时参与多笔交易(你必 ...

  5. Future 和 CompletableFuture 异步任务 in Java

    Future 异步任务 定义Callable接口的实现 import java.util.concurrent.Callable; public class RealDataCallable impl ...

  6. Jcaptcha组件和kaptcha组件实现验证码

  7. spring security跳过认证

    在启动springboot的时候,给启动注解后添加这个exclude参数后接想要跳过的类就不会加载它了. @SpringBootApplication(exclude = { org.springfr ...

  8. Js自定义数组map之bigmap

    /** * like map,but prev,curr,next and index will be given * @param {Function} cb Callback,the parame ...

  9. 四十二、python中异常

    1.常用异常: AttributeError 试图访问一个对象没有的树形,比如foo.x,但是foo没有属性xIOError 输入/输出异常:基本上是无法打开文件ImportError 无法引入模块或 ...

  10. leetcode 53. Maximum Subarray 、152. Maximum Product Subarray

    53. Maximum Subarray 之前的值小于0就不加了.dp[i]表示以i结尾当前的最大和,所以需要用一个变量保存最大值. 动态规划的方法: class Solution { public: ...