ssm上传文件进度条_sprinmvc ajax文件上传带进度条(jQuery fileUpload插件附源码)

本项目是基于springmvc框架开发，使用了jQuery fileUpload插件来实现ajax文件上传带进度条的功能，请在ssm框架的基础上按照本教程操作，ssm如何整合这里就不解释了，项目中涉及到的js,css文件在项目demo源码中，项目源码下载地址：http://pan.baidu.com/s/1slQ0Z9r。

先看看上传文件时带进度条的效果，如图所示。

ajax文件上传成功之后，会提示xxx文件上传成功。

如果你的文件格式不正确，就会提示你的文件格式错误，如图。

1.下面开始来实现ajax文件上传带进度条的功能，先写ajaxUpload.jsp前端页面，代码如下。

pageEncoding="utf-8"%>

html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

ajax文件上传进度条

$(function(){

//支持的文件类型正则表达式

var fileType = /\.(doc?x|xls?x|ppt?x|txt|jpg|zip|rar)$/i;

$("#fileupload").fileupload({

url: 'http://localhost:8080/uploadDemo/rest/file/ajaxUpload',

dataType: 'json',

add: function(e, data) { //add表示在选择文件时判断格式是否正确

var goUpload = true;

var uploadFile = data.files[0];

if (!fileType.test(uploadFile.name)) {

console.log(uploadFile.name);

$('#uploadResult').html('');

$('#uploadError').html('文件格式不正确');

$('#fileName').val('');

goUpload = false;

}

if (goUpload == true) {

data.submit();

}

},

done: function(e, data) {   //done为文件上传成功需要做的事情

$('#progress').hide();

$('#uploadError').html('');

$('#uploadResult').html(data.result.fileName+' 上传成功');

//上传成功将文件名赋值给fileName属性,以便将文件名提交到数据库存储

$('#fileName').val(data.result.fileName);

},

progressall: function(e, data) {  //进度条显示

$('#progress').show();

$('#uploadError').html('');

$('#uploadResult').html('');

var progress = parseInt(data.loaded / data.total * 100, 10);

$('#progress .progress-bar span').css('width', progress + '%');

}

});

});

浏览文件

只能上传doc,docx,xls,xlsx,ppt,pptx,txt,pdf,zip,rar,jpg格式的文件

2.springmvc文件上传封装类，用于封装文件名称，文件大小，文件类型，以及文件的字节数组，这些数据将会返回到前端，jquery fileupload插件会根据这些数据计算并显示进度条。package com.baidu;

public class FileMeta {

//文件名称

private String fileName;

//文件大小

private String fileSize;

//文件类型

private String fileType;

//文件字节数组

private byte[] bytes;

public String getFileName() {

return fileName;

}

public void setFileName(String fileName) {

this.fileName = fileName;

}

public String getFileSize() {

return fileSize;

}

public void setFileSize(String fileSize) {

this.fileSize = fileSize;

}

public String getFileType() {

return fileType;

}

public void setFileType(String fileType) {

this.fileType = fileType;

}

public byte[] getBytes() {

return bytes;

}

public void setBytes(byte[] bytes) {

this.bytes = bytes;

}

}

3.springmvc controller层实现文件上传功能，代码如下。package com.baidu;

import java.io.File;

import java.io.IOException;

import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.multipart.MultipartFile;

import org.springframework.web.multipart.MultipartHttpServletRequest;

@RequestMapping("file")

@Controller

public class FileController {

@RequestMapping(value = "/ajaxUpload")

@ResponseBody

public FileMeta upload(MultipartHttpServletRequest request, HttpServletResponse response) {

String path = request.getSession().getServletContext().getRealPath("upload");

MultipartFile mpf = request.getFile("file");

FileMeta fileMeta = null;

if (mpf != null) {

fileMeta = new FileMeta();

fileMeta.setFileName(mpf.getOriginalFilename());

fileMeta.setFileSize(mpf.getSize() / 1024 + " Kb");

fileMeta.setFileType(mpf.getContentType());

try {

fileMeta.setBytes(mpf.getBytes());

mpf.transferTo(new File(path,mpf.getOriginalFilename()));

} catch (IOException e) {

e.printStackTrace();

}

}

//将封装的文件数据返回到前端

return fileMeta;

}

}

4.springmvc项目要想支持文件上传，一定要在spring-servlet.xml视图解析器下面加入文件解析器配置代码，如下。

你可以将ajax文件上传功能添加到form表单中，ajax上传成功之后会返回成功后的文件名，再把上传的文件名存储到数据库中，比如我的项目就是这样的，如下。

来源网站：太平洋学习网，转载请注明出处：http://www.tpyyes.com/a/javaweb/71.html