使用 apache fileupload ,spring MVC jquery1.6x , bootstrap 实现一个带进度条的多文件上传,由于旁谈fileupload 的局限,暂不能实现每个上传文件都显示进度条,只能实现一个总的进度条,效果如图:
1、jsp 页面
<!DOCTYPE html><%@ page contentType="text/htmlcharset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<script src="../js/jquery-1.6.4.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/>
</head>
<body>
<form id='fForm' class="form-actions form-horizontal" action="../upload.html"
encType="multipart/form-data" target="uploadf" method="post">
<div class="control-group">
<label class="control-label">上传文件:</label>
<div class="controls">
<input type="file" name="file" style="width:550">
</div>
<div class="controls">
<型孙input type="file" name="file" style="width:550">
</div>
<div class="controls">
<input type="file" name="file" style="width:550">
</div>
<label class="control-label">上传进度:</label>
<div class="controls">
<div class="progress progress-success progress-striped" style="width:50%">
卜启链 <div id = 'proBar' class="bar" style="width: 0%"></div>
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="button" id="subbut" class="btn">submit</button>
</div>
</div>
</form>
<iframe name="uploadf" style="display:none"></iframe>
</body>
</html>
<script >
$(document).ready(function(){
$('#subbut').bind('click',
function(){
$('#fForm').submit()
var eventFun = function(){
$.ajax({
type: 'GET',
url: '../process.json',
data: {},
dataType: 'json',
success : function(data){
$('#proBar').css('width',data.rate+''+'%')
$('#proBar').empty()
$('#proBar').append(data.show)
if(data.rate == 100){
window.clearInterval(intId)
}
}})}
var intId = window.setInterval(eventFun,500)
})
})
</script>
2、java 代码
package com.controller
import java.util.List
import javax.servlet.http.HttpServletRequest
import javax.servlet.http.HttpServletResponse
import javax.servlet.http.HttpSession
import org.apache.commons.fileupload.FileItemFactory
import org.apache.commons.fileupload.ProgressListener
import org.apache.commons.fileupload.disk.DiskFileItemFactory
import org.apache.commons.fileupload.servlet.ServletFileUpload
import org.apache.log4j.Logger
import org.springframework.stereotype.Controller
import org.springframework.web.bind.annotation.RequestMapping
import org.springframework.web.bind.annotation.RequestMethod
import org.springframework.web.bind.annotation.ResponseBody
import org.springframework.web.servlet.ModelAndView
@Controller
public class FileUploadController {
Logger log = Logger.getLogger(FileUploadController.class)
/**
* upload 上传文件
* @param request
* @param response
* @return
* @throws Exception
*/
@RequestMapping(value = "/upload.html", method = RequestMethod.POST)
public ModelAndView upload(HttpServletRequest request,
HttpServletResponse response) throws Exception {
final HttpSession hs = request.getSession()
ModelAndView mv = new ModelAndView()
boolean isMultipart = ServletFileUpload.isMultipartContent(request)
if(!isMultipart){
return mv
}
// Create a factory for disk-based file items
FileItemFactory factory = new DiskFileItemFactory()
// Create a new file upload handler
ServletFileUpload upload = new ServletFileUpload(factory)
upload.setProgressListener(new ProgressListener(){
public void update(long pBytesRead, long pContentLength, int pItems) {
ProcessInfo pri = new ProcessInfo()
pri.itemNum = pItems
pri.readSize = pBytesRead
pri.totalSize = pContentLength
pri.show = pBytesRead+"/"+pContentLength+" byte"
pri.rate = Math.round(new Float(pBytesRead) / new Float(pContentLength)*100)
hs.setAttribute("proInfo", pri)
}
})
List items = upload.parseRequest(request)
// Parse the request
// Process the uploaded items
// Iterator iter = items.iterator()
// while (iter.hasNext()) {
// FileItem item = (FileItem) iter.next()
// if (item.isFormField()) {
// String name = item.getFieldName()
// String value = item.getString()
// System.out.println("this is common feild!"+name+"="+value)
// } else {
// System.out.println("this is file feild!")
// String fieldName = item.getFieldName()
// String fileName = item.getName()
// String contentType = item.getContentType()
// boolean isInMemory = item.isInMemory()
// long sizeInBytes = item.getSize()
// File uploadedFile = new File("c://"+fileName)
// item.write(uploadedFile)
// }
// }
return mv
}
/**
* process 获取进度
* @param request
* @param response
* @return
* @throws Exception
*/
@RequestMapping(value = "/process.json", method = RequestMethod.GET)
@ResponseBody
public Object process(HttpServletRequest request,
HttpServletResponse response) throws Exception {
return ( ProcessInfo)request.getSession().getAttribute("proInfo")
}
class ProcessInfo{
public long totalSize = 1
public long readSize = 0
public String show = ""
public int itemNum = 0
public int rate = 0
}
}
代洞雀码如下:import java.awt.Colorimport java.awt.Toolkitimport javax.swing.ImageIconimport javax.swing.JLabelimport javax.swing.JOptionPaneimport javax.swing.JProgressBarimport javax.swing.JWindow@SuppressWarnings("serial") public class Demo extends JWindow implements Runnable { // 定义加载窗口大小 public static final int LOAD_WIDTH = 455public static final int LOAD_HEIGHT = 295// 获取屏幕窗口大小 public static final int WIDTH = Toolkit.getDefaultToolkit().getScreenSize().widthpublic static final int HEIGHT = Toolkit.getDefaultToolkit().getScreenSize().height// 定义进度条组件 public JProgressBar progressbar// 定义标签组件 public JLabel label// 构造函数 public Demo() { // 创建标签,并在标签上放置一张图片 label = new JLabel(new ImageIcon("images/background.jpg"))label.setBounds(0, 0, LOAD_WIDTH, LOAD_HEIGHT - 15)//冲中 创建进度条 progressbar = new JProgressBar()// 显示当前进度值信纳判早息 progressbar.setStringPainted(true)// 设置进度条边框不显示 progressbar.setBorderPainted(false)// 设置进度条的前景色 progressbar.setForeground(new Color(0, 210, 40))// 设置进度条的背景色 progressbar.setBackground(new Color(188, 190, 194))progressbar.setBounds(0, LOAD_HEIGHT - 15, LOAD_WIDTH, 15)// 添加组件 this.add(label)this.add(progressbar)// 设置布局为空 this.setLayout(null)// 设置窗口初始位置 this.setLocation((WIDTH - LOAD_WIDTH) / 2, (HEIGHT - LOAD_HEIGHT) / 2)// 设置窗口大小 this.setSize(LOAD_WIDTH, LOAD_HEIGHT)// 设置窗口显示 this.setVisible(true)} public static void main(String[] args) { Demo t = new Demo()new Thread(t).start()} @Override public void run() { for (int i = 0i <100i++) { try { Thread.sleep(100)} catch (InterruptedException e) { e.printStackTrace()} progressbar.setValue(i)} JOptionPane.showMessageDialog(this, "加载完成")this.dispose()} } 效果图:欢迎分享,转载请注明来源:内存溢出
评论列表(0条)