此案例使用ajax + springmvc
1、第一种方式
第一种使用的是ajax formData,这种方式，ie9不支持formData,所以从中方式不使用ie9，（ie10 and ie10+ 没有测试）
html:
<style>
#prograssbarBorder{
width:500px;
height:30px;
border:1px solid #B2B2B2;
border-radius:50px 50px 50px 50px;
}
#prograssbar{
width:0px;
height:30px;
background:#00D328;
border-radius:50px 50px 50px 50px;
}
</style>
<script>
var xhr;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else {// code for IE6, IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
$(function() {
$("#testInfoForm").submit(function() {
var fileData = document.getElementById('uploadFile').files[0];
var formData = new FormData();
xhr.open('post', 'testSaveUpload.do', true);
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
//0: 请求未初始化
//1: 服务器连接已建立
//2: 请求已接收
//3: 请求处理中
//4: 请求已完成，且响应已就绪
document.getElementById('prograssbar').style.width = 100 + '%';
document.getElementById('precent').innerHTML = Math.floor(100) + '%';
}
}
xhr.upload.onprogress = function(ev) {
if (ev.lengthComputable) {
var precent = 100 * ev.loaded / ev.total;
if(100 == precent){
document.getElementById('prograssbar').style.width = 99.9 + '%';
document.getElementById('precent').innerHTML = Math.floor(99.9) + '%';
}else{
document.getElementById('prograssbar').style.width = precent + '%';
document.getElementById('precent').innerHTML = Math.floor(precent) + '%';
}
}
}
formData.append('uploadFile', fileData);
xhr.send(formData);
return false;
});
})
</script>
<div>
<div id="prograssbarBorder">
<div id="prograssbar"></div>
</div>
<span id="precent"></span><br/>
<form id="testInfoForm" enctype="multipart/form-data">
<div>
<table>
<tr>
<td>上传文件</td>
<td><input type="file" id="uploadFile" name="uploadFile"
class="InputStyle" /> *</td>
</tr>
</table>
</div>
<div>
<input type="submit" id="saveBtn" />
</div>
</form>
</div>
2、第二种方式
第二种方式使用ajaxform,使用ajxasubmit来处理，这种方式支持ie9（仅仅支持文件的上传，不支持进度条显示）同理 ie10 and ie10+ 没有试验。
html:
注意：第二中方式需要引入 juqery.form.js
<script type="text/javascript" src="js/jquery.form.js"></script>
<style>
#prograssbarBorder {
width: 500px;
height: 30px;
border: 1px solid #B2B2B2;
border-radius: 50px 50px 50px 50px;
}
#prograssbar {
width: 0px;
height: 30px;
background: #00D328;
border-radius: 50px 50px 50px 50px;
}
</style>
<script>
function onprogress(ev){
if (ev.lengthComputable) {
var precent = 100 * ev.loaded / ev.total;
if(100 == precent){
document.getElementById('prograssbar').style.width = 99.9 + '%';
document.getElementById('precent').innerHTML = Math.floor(99.9) + '%';
}else{
document.getElementById('prograssbar').style.width = precent + '%';
document.getElementById('precent').innerHTML = Math.floor(precent) + '%';
}
}
}
function onreadystatechange(ev){
if (this.readyState == 4) {
//0: 请求未初始化
//1: 服务器连接已建立
//2: 请求已接收
//3: 请求处理中
//4: 请求已完成，且响应已就绪
document.getElementById('prograssbar').style.width = 100 + '%';
document.getElementById('precent').innerHTML = Math.floor(100) + '%';
}
}
$(function() {
/* $('#testInfoForm').ajaxForm(function(){
}); */
$("#testInfoForm").submit(function() {
var option = {
url : 'testSaveUpload.do',
type : "post",
async : true, //必须是异步，否则进度条不会显示
success : function(data) {
var aa = "aaa";
},
xhr : function(){
var xhr = $.ajaxSettings.xhr();
if(onprogress && xhr.upload) {
xhr.upload.addEventListener("progress" , onprogress, false);
}
xhr.addEventListener("readystatechange",onreadystatechange,false);
return xhr;
},
};
$("#testInfoForm").ajaxSubmit(option);
return false;
});
})
</script>
<div>
<div id="prograssbarBorder">
<div id="prograssbar"></div>
</div>
<span id="precent"></span><br />
<form id="testInfoForm" enctype="multipart/form-data">
<div>
<table>
<tr>
<td>上传文件</td>
<td><input type="file" id="uploadFile" name="uploadFile"
class="InputStyle" /> *</td>
</tr>
</table>
</div>
<div>
<input type="submit" id="saveBtn" />
</div>
</form>
</div>
后台：
@RequestMapping(value="testSaveUpload")
public void testSaveUpload(HttpServletRequest request,HttpServletResponse response) throws Exception{
response.setContentType("text/html");
MultipartHttpServletRequest multiPartRequest = (MultipartHttpServletRequest) (request instanceof MultipartHttpServletRequest ? request : null) ;
MultipartFile uploadFile = multiPartRequest.getFile("uploadFile");
String originalFilename = uploadFile.getOriginalFilename();
String subfix = originalFilename.substring(originalFilename.lastIndexOf("."), originalFilename.length());
File filePaht = new File("D:\\TestM\\Exam\\"+UUID.randomUUID().toString()+subfix);
uploadFile.transferTo(filePaht);
response.setStatus(HttpServletResponse.SC_OK);
response.getOutputStream().println("aaa");
}
3、第三种方式
第三种方式，使用前台不断给后台发送请求，后台利用线程，将已经读取的文件返回给前台这种方式，兼容ie9。同样用到了 ajaxform,使用ajxasubmit提交。需要引入 juqery.form.js
html:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp"%>
<%@ include file="/common/tips.jsp"%>
<script type="text/javascript" src="js/jquery.form.js"></script>
<style>
#prograssbarBorder {
width: 500px;
height: 30px;
border: 1px solid #B2B2B2;
border-radius: 50px 50px 50px 50px;
}
#prograssbar {
width: 0px;
height: 30px;
background: #00D328;
border-radius: 50px 50px 50px 50px;
}
</style>
<script>
$(function() {
$("#testInfoForm").submit(function() {
var option = {
url : 'testSaveUpload.do',
type : "post",
success : function(data) {
// requestStatus+",,,"+threadId+",,,"threadStatus
var requestStatus = data.split(",,,")[0];
var currentThreadId = data.split(",,,")[1];
var threadStatus = data.split(",,,")[2];
var totalSize = data.split(",,,")[3];
var readSize = data.split(",,,")[4];
if(requestStatus == 'running'){//未完成，正在运行
$("#threadId").val(currentThreadId);
var precent = 100 * readSize / totalSize;
document.getElementById('prograssbar').style.width = precent + '%';
document.getElementById('precent').innerHTML = Math.floor(precent) + '%';
}else if(requestStatus == 'success'){ //上传完成，成功
$("#threadId").val("");
clearInterval(myInterval);
document.getElementById('prograssbar').style.width = 100 + '%';
document.getElementById('precent').innerHTML = Math.floor(100) + '%';
}else if(requestStatus == 'failed'){ //上传失败
$("#threadId").val("");
clearInterval(myInterval);
}else{
$("#threadId").val("");
clearInterval(myInterval);
}
},
error : function (){
$("#threadId").val("");
clearInterval(myInterval);
},
};
var myInterval =setInterval(function(){
var threadId = $("#threadId").val();
$("#testInfoForm").ajaxSubmit(option);
},500);
return false;
});
})
</script>
<div>
<div id="prograssbarBorder">
<div id="prograssbar"></div>
</div>
<span id="precent"></span><br />
<form id="testInfoForm" enctype="multipart/form-data">
<input type="hidden" id="threadId" name="threadId" />
<div>
<table>
<tr>
<td>上传文件</td>
<td><input type="file" id="uploadFile" name="uploadFile"
class="InputStyle" /> *</td>
</tr>
</table>
</div>
<div>
<input type="submit" value="提交" id="saveBtn" />
</div>
</form>
</div>
后台：
@RequestMapping(value="testSaveUpload")
public void testSaveUpload(HttpServletRequest request,HttpServletResponse response,String threadId) throws Exception{
MultipartHttpServletRequest multiPartRequest = (MultipartHttpServletRequest) (request instanceof MultipartHttpServletRequest ? request : null) ;
MultipartFile uploadFile = multiPartRequest.getFile("uploadFile");
String originalFilename = uploadFile.getOriginalFilename();
String subfix = originalFilename.substring(originalFilename.lastIndexOf("."), originalFilename.length());
InputStream input = uploadFile.getInputStream();
//总大小
long totleSize = uploadFile.getSize();
System.out.println("总大小：---》"+totleSize);
long readSum = 0l;
if(StringUtils.isNotBlank(threadId)){ //当前线程正在运行
ReadFileThread readFileThread = (ReadFileThread) ConstantMap.constantMap.get(threadId);
//获取已读大小
long readSize = readFileThread.getReadSum();
//线程状态
String threadStatus = readFileThread.getThreadStatus();
if("completed".equals(threadStatus)){ //线程已经运行完毕
ConstantMap.constantMap.remove(threadId);
response.getOutputStream().println("success,,,"+threadId+",,,"+threadStatus+",,,"+totleSize+",,,"+readSize);
return ;
}else if("error".equals(threadStatus)){ //出错
ConstantMap.constantMap.remove(threadId);
response.getOutputStream().println("failed,,,"+threadId+",,,"+threadStatus+",,,"+totleSize+",,,"+readSize);
return ;
}else if("uncompleted".equals(threadStatus)){ //未完成
response.getOutputStream().println("running,,,"+threadId+",,,"+threadStatus+",,,"+totleSize+",,,"+readSize);
return ;
}
return ;
}else{ // 一个新的请求
File filePaht = new File("D:\\TestM\\Exam\\"+UUID.randomUUID().toString()+subfix);
//文件夹不存在就创建
if(!filePaht.getParentFile().exists()){
filePaht.getParentFile().mkdirs();
}
FileOutputStream output = new FileOutputStream(filePaht);
threadId = UUID.randomUUID().toString();
//创建一个新的线程
ReadFileThread readFileThread = new ReadFileThread(input, output,readSum);
Thread thread = new Thread(readFileThread);
thread.start();
//获取已读大小
long readSize = readFileThread.getReadSum();
//线程状态
String threadStatus = readFileThread.getThreadStatus();
if("completed".equals(threadStatus)){ //线程已经运行完毕
ConstantMap.constantMap.remove(threadId);
System.out.println("end");
response.getOutputStream().println("success,,,"+threadId+",,,"+threadStatus+",,,"+totleSize+",,,"+readSize);
return ;
}else if("error".equals(threadStatus)){ //出错
ConstantMap.constantMap.remove(threadId);
response.getOutputStream().println("failed,,,"+threadId+",,,"+threadStatus+",,,"+totleSize+",,,"+readSize);
return ;
}else if("uncompleted".equals(threadStatus)){ //未完成
ConstantMap.constantMap.put(threadId, readFileThread);
response.getOutputStream().println("running,,,"+threadId+",,,"+threadStatus+",,,"+totleSize+",,,"+readSize);
return ;
}
}
return ;
}
class ReadFileThread implements Runnable{
InputStream input;
FileOutputStream output;
String threadStatus = "uncompleted";
long readSum;
public String getThreadStatus() {
return threadStatus;
}
public void setThreadStatus(String threadStatus) {
this.threadStatus = threadStatus;
}
public Long getReadSum() {
return readSum;
}
public ReadFileThread(InputStream input,FileOutputStream output, Long readSum) {
this.input = input;
this.output = output;
this.readSum = readSum;
}
@Override
public void run() {
int readLength = 0;
byte[] buffer = new byte[1444];
try {
while ( (readLength = input.read(buffer)) != -1) {
readSum += readLength;
System.out.println("已读大小：--》"+readSum);
output.write(buffer, 0, readLength);
}
} catch (Exception e) {//出错
this.setThreadStatus("error");
}finally{
try {//完成，成功
this.setThreadStatus("completed");
if(null != output){
output.close();
}
if(null != output){
input.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
package com.exam.bean.common;
import java.util.Hashtable;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
public class ConstantMap {
//此处使用 hashtable ,防止并发问题
public static Hashtable<String, Object> constantMap = new Hashtable<>();
public static void setConstantMap(String key,Object value){
if(constantMap.containsKey(key)){
constantMap.remove(key);
constantMap.put(key, value);
}else{
constantMap.put(key, value);
}
}
public static Object getConstantMap(String key){
Pattern pattern = Pattern.compile("\r\n");
Matcher matcher = pattern.matcher(key);
key = matcher.replaceAll("");
if(constantMap.containsKey(key)){
return constantMap.get(key);
}
return null;
}
public static Object removeConstantMap(String key){
if(constantMap.containsKey(key)){
return constantMap.remove(key);
}
return null;
}
}
运行效果如下：
另外附上：juqery.form.js
相关推荐
这个主题“java+ajax上传文件带进度条”聚焦于使用Java后端和Ajax前端技术来完成这一功能。下面将详细介绍如何实现这一功能，以及涉及的关键知识点。 **1. 前端部分（Ajax）** Ajax（Asynchronous JavaScript and ...
在现代Web应用中，用户界面的流畅性和交互性至关重要，"Ajax无刷新上传文件带进度条"技术就很好地满足了这一需求。Ajax（Asynchronous JavaScript and XML）是一种创建动态网页的技术，它允许在不重新加载整个页面的...
// 进行Ajax上传操作 }); ``` 3. **创建Ajax请求**：创建XMLHttpRequest对象，设置请求方法、URL、同步/异步属性等，然后创建FormData对象，将文件添加到其中。 ```javascript var xhr = new XMLHttpRequest(); ...
虽然HTML5的File API和AJAX上传功能在现代浏览器中得到了广泛支持，但在一些较旧或非主流的浏览器中可能无法工作。因此，开发时需要考虑使用polyfill库或备用方案，如Flash，以确保跨浏览器兼容性。 综上所述，...
为了解决这一问题，ASP（Active Server Pages）结合AJAX（Asynchronous JavaScript and XML）技术，实现了无刷新文件上传，同时还提供了进度条显示，提高了交互性。本文将深入探讨这种技术的实现原理及步骤。 一、...
在这个项目中，SSH2框架与Ajax技术结合，实现了一个带进度条的文件上传功能，并且这个功能已经被封装成了自定义标签，方便在页面上直接使用。 首先，让我们深入理解SSH框架的每个组件： 1. **Struts2**：Struts2是...
**Ajax上传组件带进度条**是一种在Web应用中实现文件上传功能的方式，它结合了Ajax技术，能够在不刷新整个页面的情况下实现文件的异步上传，并且提供了可视化的进度条显示，提高了用户体验。这个组件是基于Struts2...
在Ajax上传文件的过程中，服务器会返回已接收文件的部分或全部，前端可以根据这个信息计算出当前的上传进度。然后，我们可以使用JavaScript来更新HTML中的进度条元素，展示给用户一个直观的进度指示。这需要前端代码...
在这个"AJAX+ASP带进度条上传"的主题中，我们将深入探讨如何利用AJAX技术和ASP（Active Server Pages）实现文件的异步上传，并同时展示上传进度，以JQuery作为辅助工具，提供更友好的用户界面。 首先，我们要理解...
本文将详细介绍如何在Struts中实现这两个功能，并带上传进度条。 首先，我们需要了解Struts中处理文件上传的基本原理。Struts2提供了一个`FileUpload`拦截器，用于处理文件上传请求。在Action类中，我们需要定义一...
综上所述，通过AJAX实现文件上传带进度条的关键在于使用XMLHttpRequest对象进行异步通信，监听文件选择、上传进度和请求状态的变化。同时，通过前端验证确保上传的文件符合服务器的预期，从而提供更好的用户体验。在...
总结，实现“webApi、MVC、ajax分段上传文件带进度条”涉及到的技术点主要包括：WebAPI作为服务接口、MVC架构处理请求、AJAX实现异步上传、文件API进行文件分段、前端进度条实时更新、服务器端分段接收与合并以及...
要实现带进度条的Ajax上传，关键在于HTML5的File API和ProgressEvent接口。File API允许我们直接访问和操作用户选择的文件，包括读取文件内容、获取文件信息等。ProgressEvent则提供了监控上传进度的方法。 1. **...
ASP.NET单文件带进度条上传解决方案 本文主要讲述了ASP.NET单文件带进度条上传的解决方案，通过使用jquery框架和ASP.NET缓存机制，实现了文件上传和进度条显示的功能。 知识点1：使用jquery框架实现文件上传 在...
在这个"struts+jQuery+ajax文件上传带进度条"的项目中，我们主要关注的是如何利用这些技术实现在后台处理文件上传时，前端能够显示实时的进度条效果，提升用户体验。 首先，Struts是一个基于MVC（Model-View-...
"jquery ajax上传 带进度条"这个主题就是关于如何在jQuery AJAX上传文件时展示进度反馈。 首先，jQuery本身并不直接支持文件上传的进度显示，但可以通过一些插件来实现，如Uploadify。Uploadify是一款强大的jQuery...
而“带进度条”的文件上传则更进一步，它能为用户提供更好的用户体验，让用户在上传大文件时能够看到实时的上传进度。 首先，我们来理解一下Struts1文件上传的基本原理。Struts1使用了`org.apache.struts.upload....
AJAXFileUpload是一种基于AJAX技术的异步文件上传组件，它允许用户在不刷新页面的情况下上传文件，并且可以实时显示上传进度，提供良好的用户体验。本文将深入探讨AJAXFileUpload的工作原理、实现方式以及其在实际...
在现代Web应用中，"Ajax无刷新文件上传(带进度条)"是一个常见且重要的功能，它极大地提升了用户体验。Ajax（Asynchronous JavaScript and XML）技术使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新...
通过以上知识点的解释，我们可以理解这个"ASP.NET Ajax 带进度条文件上传示例"是如何工作的，并且可以从中学习到如何在自己的项目中实现类似的功能。这个示例不仅展示了技术的应用，还强调了代码的简洁性和开源精神...