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. tf.expand_dims和tf.squeeze函数

    from http://blog.csdn.net/qq_31780525/article/details/72280284 tf.expand_dims() Function tf.expand_d ...

  2. 【leetcode】1221. Split a String in Balanced Strings

    题目如下: Balanced strings are those who have equal quantity of 'L' and 'R' characters. Given a balanced ...

  3. CentOS8 中文输入法

    CentOS8发布了,安装了下试试,结果发现中文输入法调不出来. 系统安装完成后,在系统[设置]的[Region&Language]里的[输入源]里可以添加汉语输入源,但是不能打中文字. 下面 ...

  4. Buffer转成字符串

    如果data为buffer格式,则: data.toString()

  5. springmvc+ajax异步上传图片

    1.javaweb传统的上传图片方式就是通过form表单提交 <form action="#" method="post" enctype="m ...

  6. 【webpack4】webpack4配置需要注意的问题

    需要注意的知识: 要全局安装webpack以及webpack cli,否则不能使用webpack指令 npm install webpack -g npm install webpack-cli -g ...

  7. Linux培训教程　linux系统下分割大文件的方法

    在linux中分割大文件,比如一个5gb日志文件,需要把它分成多个小文件,分割后以利于普通的文本编辑器读取. 有时,需要传输20gb的大文件,Linux培训 教程件到另一台服务器,也需要把它分割成多个 ...

  8. UVa 11212 Editing a Book (IDA* && 状态空间搜索)

    题意:你有一篇n(2≤n≤9)个自然段组成的文章,希望将它们排列成1,2,…,n.可以用Ctrl+X(剪切)和Ctrl+V(粘贴)快捷键来完成任务.每次可以剪切一段连续的自然段,粘贴时按照顺序粘贴.注 ...

  9. Android网络技术之WebView常用方法

    public class WebViewTest extends Activity {       private WebView wv;     private EditText et;       ...

  10. Vue.js之Ajax请求

    Vue.js同React.Angular,可以说号称前端三巨头. 前段时间,有个哥们说,Vue.js现在出2.0版本了.可是我现在还是在用1.0的. Vue.js一直都没有好好系统的学习,包括目前公司 ...