最新消息:关注【太平洋学习网】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

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

Javaweb 太平洋学习网 浏览 评论

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

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

4CHIP7L~RQXVI3QW5@V%PGA.png

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


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

0947P3U~GM}8(2)[M[]BJAS.png

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

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="lib/jquery.fileupload/css/jquery.fileupload.css">
<link rel="stylesheet" type="text/css" href="lib/jquery.fileupload/css/H-ui.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery.fileupload/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="lib/jquery.fileupload/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="lib/jquery.fileupload/js/jquery.fileupload.js"></script>
<style type="text/css">
</style>
<title>ajax文件上传进度条</title>
<script type="text/javascript">
$(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 + '%');
		}
	});
});
</script>
</head>
<body>	
	<!-- <form action="xxx" > 你可以将以下代码放入form表单里面-->
       	<div class="formControls col-md-10">
			 <span class="btn btn-success fileinput-button mr-5">
       			<span>浏览文件</span>
       			<input id="fileupload" type="file" name="file">
   			</span>
       		<span id="uploadResult"></span><span id="uploadError" style="color: red;"></span>
   			<div class="mt-5">
   				<span class="uploadTip">只能上传doc,docx,xls,xlsx,ppt,pptx,txt,pdf,zip,rar,jpg格式的文件</span>
   			</div>
			<div id="progress" class="progress mt-10" style="display: none;">
				<div class="progress-bar"><span class="sr-only"></span></div>
			</div>
			<!-- ajax上传成功后返回文件名,如value='xxx.txt' -->
			<input type="hidden" id="fileName" name="fileName" > 		
       	</div>
    <!-- </form> -->
</body>

</html>

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视图解析器下面加入文件解析器配置代码,如下。

<!-- 定义文件解释器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
	<!-- 设置默认编码 -->
	<property name="defaultEncoding" value="utf-8"></property>
	<!-- 上传图片最大大小50M--> 
	<property name="maxUploadSize" value="52424400"></property>  
</bean>

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







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

    与本文相关的文章

    发表我的评论
    取消评论

    表情

    您的回复是我们的动力!

    • 昵称 (必填)

    网友最新评论