maven工程 java 实现文件上传 SSM ajax异步请求上传
java ssm框架实现文件上传
实现：单文件上传、多文件上传（单选和多选），并且用 ajax 异步刷新，在当前界面显示上传的文件
首先springmvc的配置文件要配置上传文件解析器：
<!-- 配置文件解析器 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver"
p:defaultEncoding="utf-8">
<property name="uploadTempDir" value="/temp"></property>
<property name="maxUploadSize">
<value>209715200</value><!-- 200MB -->
</property>
<property name="maxInMemorySize">
<value>4096</value><!-- 4KB大小读写 -->
</property>
</bean>
其次在pom.xml中要配置两个上传文件的依赖
<!--上传文件相关的jar包 -->
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency> <dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency> <dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.3.2</version>
</dependency>
单文件上传：
/**
* 单文件上传
* @param file
* @param request
* @return
* @throws IllegalStateException
* @throws IOException
* @throws JSONException
*/
public static String simUpload(MultipartFile file, HttpServletRequest request)
throws IllegalStateException, IOException, JSONException{ if(!file.isEmpty()){
String path = request.getSession().getServletContext().getRealPath("/upload");
//定义文件
File parent = new File(path);
if(!parent.exists()) parent.mkdirs(); HashMap<String, Object> map = new HashMap<String,Object>(); String oldName = file.getOriginalFilename(); long size = file.getSize(); //使用TmFileUtil文件上传工具获取文件的各种信息
//优化文件大小
String sizeString = TmFileUtil.countFileSize(size);
//获取文件后缀名
String ext = TmFileUtil.getExtNoPoint(oldName);
//随机重命名，10位时间字符串
String newFileName = TmFileUtil.generateFileName(oldName, 10, "yyyyMMddHHmmss"); String url = "upload/"+newFileName; //文件传输，parent文件
file.transferTo(new File(parent, newFileName)); map.put("oldname",oldName);//文件原名称
map.put("ext",ext);
map.put("size",sizeString);
map.put("name",newFileName);//文件新名称
map.put("url",url); //以json方式输出到页面
return JSONUtil.serialize(map);
}else{
return null;
}
}
多文件上传（整合了 单选文件和多选文件 的两种）
/**
* 多文件上传
* @param files
* @param request
* @return
* @throws IllegalStateException
* @throws IOException
* @throws JSONException
*/
public static List<HashMap<String, Object>> mutlUpload(MultipartFile[] files, HttpServletRequest request)
throws IllegalStateException, IOException, JSONException{ if(files.length > 0){
String path = request.getSession().getServletContext().getRealPath("/upload");
//定义文件
File parent = new File(path);
if(!parent.exists()) parent.mkdirs(); //创建这个集合保存所有文件的信息
List<HashMap<String, Object>> listMap = new ArrayList<HashMap<String, Object>>(); //循环多次上传多个文件
for (MultipartFile file : files) { //创建map对象保存每一个文件的信息
HashMap<String, Object> map = new HashMap<String,Object>(); String oldName = file.getOriginalFilename(); long size = file.getSize(); //使用TmFileUtil文件上传工具获取文件的各种信息
//优化文件大小
String sizeString = TmFileUtil.countFileSize(size);
//获取文件后缀名
String ext = TmFileUtil.getExtNoPoint(oldName);
//随机重命名，10位时间字符串
String newFileName = TmFileUtil.generateFileName(oldName, 10, "yyyyMMddHHmmss"); String url = "upload/"+newFileName; //文件传输，parent文件
file.transferTo(new File(parent, newFileName)); map.put("oldname",oldName);//文件原名称
map.put("ext",ext);
map.put("size",sizeString);
map.put("name",newFileName);//文件新名称
map.put("url",url); listMap.add(map);
} //以json方式输出到页面
return listMap;
}else{
return null;
}
}
前端代码：
文件多选，实际上在
<input type="file" class="fileupon33" name="fileupmulti" accept="image/jpeg,image/png" onchange="mutiFiles(this)" multiple/>
多加了一个 multiple 属性。
要想在当前界面显示上传的文件，而不跳转，就利用 ajax 异步请求：
不过需要注意的是，我这里使用 FormData() 储存文件对象， ajax 要配上这几个参数才可实现文件上传：
$.ajax({
type:"post",
data:form, //FormData()对象
url:basePath+"/upload/mutl",
contentType: false, //必须false才会自动加上正确的Content-Type
processData: false, //必须false才会避开jQuery对 formdata 的默认处理 , XMLHttpRequest会对 formdata 进行正确的处理
success:function(data){
}
});
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+path+"/";
pageContext.setAttribute("basePath", basePath);
%>
<!DOCTYPE HTML>
<html>
<head>
<title>文件上传</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="This is my page">
<style>
*{padding: 0;margin:0}
ul,li{list-style:none;}
a{color:#333;text-decoration: none;}
.hidden{display:hidden;}
input{border:0;outline:0;margin-bottom:10px;}
img{vertical-align: middle;}
.clear{clear:both;}
body{font-size:14px;font-family: "微软雅黑";background:#333}
.buttons{ display: block;
width: 80px;
height: 26px;
color: black;
background: #ffffff;
font-size: 14px;
font-family: "微软雅黑";
margin: 0 auto;
cursor: pointer;
margin-bottom: 10px;} .container{width:1080px;margin:80px auto;} .formbox{float:left;text-align:center;width:300px;}
.title{color:#fff;font-size:24px;margin-bottom:20px;}
.formbox .f_btn{width:100px;height:40px;background:#0c0;color:#fff;font-size:14px;font-family:"微软雅黑";cursor:pointer;font-weight:bold;}
.massage p{color:#fff;text-align:left;height:24px;}
.sinimg{width:300px;height:300px;line-height:300px;color:#fff;} .formmutibox{float:left;width: 342px;margin: 0 24px 0;text-align:center;}
.formmutibox .title{color:#fff;font-size:24px;margin-bottom:20px;}
.formmutibox .f_btn{width:100px;height:40px;background:#0c0;color:#fff;font-size:14px;font-family:"微软雅黑";cursor:pointer;font-weight:bold;}
.files table td{color:#fff;width:135px;} ::-webkit-scrollbar{width: 10px;height: 10px;}
::-webkit-scrollbar-track{background: 0 0;}
::-webkit-scrollbar-track-piece{background:#fff;}
::-webkit-scrollbar-thumb{background-color: #a2a2a2; border-radius: 5px;}
::-webkit-scrollbar-thumb:hover{background-color: #868686;}
::-webkit-scrollbar-corner{background:#212121;}
::-webkit-scrollbar-resizer{background:#FF0BEE;}
scrollbar{-moz-appearance:none !important;background:rgb(0,255,0) !important;}
scrollbarbutton{-moz-appearance:none !important;background-color:rgb(0,0,255) !important;}
scrollbarbutton:hover{-moz-appearance:none !important;background-color:rgb(255,0,0) !important;}
/* 隐藏上下箭头 */
scrollbarbutton{display:none !important;}
/* 纵向滚动条宽度 */
scrollbar[orient="vertical"]{min-width:12px !important;}
</style>
</head>
<body>
<div class="container">
<!--单文件上传-->
<div class="formbox">
<p class="title">单个文件上传</p>
<input type="file" id="fileupone" name="fileup" accept="image/jpeg,image/png" onchange="uploadFile(this)"/>
<div class="massage">
<p>文件名：<span class="filename"></span></p>
<p>大小：<span class="filesize"></span></p>
<p>文件格式：<span class="fileext"></span></p>
<p>预览：</p>
<div class="sinimg">
预览图
</div>
</div>
</div> <!--多文件上传-->
<div class="formmutibox">
<p class="title">多文件上传（单选）</p>
<input type="file" class="fileupon11" accept="image/jpeg,image/png" />
<input type="file" class="fileupon12" accept="image/jpeg,image/png" />
<input type="file" class="fileupon13" accept="image/jpeg,image/png" />
<input type="button" class="buttons" value="提交" onclick="multipartone()"/>
<!--files start-->
<div class="files">
<table>
<thead>
<tr>
<td class="filelook2">文件预览</td>
<td class="filename2">文件名</td>
<td class="filesize2">大小</td>
</tr>
</thead>
<tbody id="f_tbody">
</tbody>
</table>
</div>
</div> <!--多文件上传-->
<div class="formmutibox">
<p class="title">多文件上传（多选）</p>
<input type="file" class="fileupon33" name="fileupmulti" accept="image/jpeg,image/png" onchange="mutiFiles(this)" multiple/>
<!--files start-->
<div class="files">
<table>
<thead>
<tr>
<td class="filelook33">文件预览</td>
<td class="filename33">文件名</td>
<td class="filesize33">大小</td>
</tr>
</thead>
<tbody id="f_tbody_m">
</tbody>
</table>
</div>
</div>
<div class="clear"></div>
</div> <script type="text/javascript" src="${basePath}/resource/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">var basePath = "${basePath}";</script>
<script type="text/javascript"> //单文件上传
function uploadFile(obj){
//创建一个FormData对象：用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString
var form = new FormData();
var fileObj = obj.files[0];
form.append("doc",fileObj); $.ajax({
type:"post",
data:form,
url:basePath+"/upload/file",
contentType: false, //必须false才会自动加上正确的Content-Type
/*
必须false才会避开jQuery对 formdata 的默认处理
XMLHttpRequest会对 formdata 进行正确的处理
*/
processData: false,
success:function(data){
var jdata = eval("("+data+")");
$(".filename").text(jdata.oldname);
$(".filesize").text(jdata.size);
$(".fileext").text(jdata.ext);
var imgString = "<img alt='预览图' src='"+jdata.url+"' width='300'>";
$(".sinimg").html(imgString);
//清除文件表单
$("#fileupone").val("");
}
});
} //多文件上传(单选)
function multipartone(){
var file1 = $(".fileupon11").get(0).files[0];
var file2 = $(".fileupon12").get(0).files[0];
var file3 = $(".fileupon13").get(0).files[0];
//如果都是空，则直接退出
if(isEmpty(file1) && isEmpty(file2) && isEmpty(file3)) return; var form = new FormData();
//用同一个名字，注入到controller层的参数数组
form.append("doc",file1);
form.append("doc",file2);
form.append("doc",file3); $.ajax({
type:"post",
data:form,
url:basePath+"/upload/mutl",
contentType: false, //必须false才会自动加上正确的Content-Type
/*
必须false才会避开jQuery对 formdata 的默认处理
XMLHttpRequest会对 formdata 进行正确的处理
*/
processData: false,
success:function(data){
var len = data.length;
for(var i = 0;i < len;i++){
var datajson = data[i];
$("#f_tbody").append("<tr class='f_item'>"+
"<td><img src='"+datajson.url+"' alt='预览图像' width='40' height='40' /></td>"+
"<td>"+datajson.oldname+"</td>"+
"<td>"+datajson.size+"</td>"
);
}
//清除文件表单
$(".fileupon11").val("");
$(".fileupon12").val("");
$(".fileupon13").val("");
}
});
} //多文件上传(多选)
function mutiFiles(obj){
var form = new FormData();
var fileObj = obj.files;
var length = fileObj.length;
//将fileObj转换成数组
//var filese = Array.from(fileObj);
for(var i = 0;i < length;i++){
form.append("doc",fileObj[i]);
}
$.ajax({
type:"post",
data:form,
url:basePath+"/upload/mutl",
contentType: false, //必须false才会自动加上正确的Content-Type
/*
必须false才会避开jQuery对 formdata 的默认处理
XMLHttpRequest会对 formdata 进行正确的处理
*/
processData: false,
success:function(data){
var len = data.length;
for(var i = 0;i < len;i++){
var datajson = data[i];
$("#f_tbody_m").append("<tr class='f_item'>"+
"<td><img src='"+datajson.url+"' alt='预览图像' width='40' height='40' /></td>"+
"<td>"+datajson.oldname+"</td>"+
"<td>"+datajson.size+"</td>"
);
}
//清除文件表单
$(".fileupon33").val("");
}
});
} /**
* 判断非空
*
* @param val
* @returns {Boolean}
*/
function isEmpty(val) {
val = $.trim(val);
if (val == null)
return true;
if (val == undefined || val == 'undefined')
return true;
if (val == "")
return true;
if (val.length == 0)
return true;
if (!/[^(^\s*)|(\s*$)]/.test(val))
return true;
return false;
}
</script>
</body>
</html>
controller层调用：
package com.krry.controller; import java.io.IOException;
import java.util.HashMap;
import java.util.List; import javax.servlet.http.HttpServletRequest; import org.apache.struts2.json.JSONException;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile; import com.krry.util.UploadUtil; /**
* 文件上传类
* KrryUploadController
* @author krry
* @version 1.0.0
*
*/
@Controller
@RequestMapping("/upload")
public class KrryUploadController { /**
* 单文件上传
* @param file
* @param request
* @return
* @throws IllegalStateException
* @throws IOException
* @throws JSONException
*/
@ResponseBody
@RequestMapping(value = "/file")
public String krryupload(@RequestParam("doc") MultipartFile file, HttpServletRequest request) throws IllegalStateException, IOException, JSONException{ //调用工具类完成上传，返回相关数据到页面
return UploadUtil.simUpload(file, request);
} /**
* 多文件上传
* @param file
* @param request
* @return
* @throws IllegalStateException
* @throws IOException
* @throws JSONException
*/
// 这里的MultipartFile[] file表示前端页面上传过来的多个文件，file对应页面中多个file类型的input标签的name，但框架只会将一个文件封装进一个MultipartFile对象，
// 并不会将多个文件封装进一个MultipartFile[]数组，直接使用会报[Lorg.springframework.web.multipart.MultipartFile;.<init>()错误，
// 所以需要用@RequestParam校正参数（参数名与MultipartFile对象名一致），当然也可以这么写：@RequestParam("file") MultipartFile[] files。
@ResponseBody
@RequestMapping(value = "/mutl")
public List<HashMap<String, Object>> krryuploadMutl(@RequestParam("doc") MultipartFile[] file, HttpServletRequest request) throws IllegalStateException, IOException, JSONException{
//调用工具类完成上传，返回相关数据到页面
return UploadUtil.mutlUpload(file, request);
}
}
到这里，完成 ajax异步请求文件上传 的功能。
附上优化文件大小的代码：
/**
* 将文件的字节数转换成文件的大小
* com.krry.uitl
* 方法名：format
* @author krry
* @param size
* @return String
* @exception
* @since 1.0.0
*/
public static String format(long size){
float fsize = size;
String fileSizeString;
if (fsize < 1024) {
fileSizeString = String.format("%.2f", fsize) + "B"; //2f表示保留两位小数
} else if (fsize < 1048576) {
fileSizeString = String.format("%.2f", fsize/1024) + "KB";
} else if (fsize < 1073741824) {
fileSizeString = String.format("%.2f", fsize/1024/1024) + "MB";
} else if (fsize < 1024 * 1024 * 1024) {
fileSizeString = String.format("%.2f", fsize/1024/1024/1024) + "GB";
} else {
fileSizeString = "0B";
}
return fileSizeString;
}
maven工程 java 实现文件上传 SSM ajax异步请求上传的更多相关文章
- ssm+ajax异步请求返回list遍历
jsp页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...
- 利用struts2进行单个文件，批量文件上传，ajax异步上传以及下载
利用struts2进行单个文件,批量文件上传,ajax异步上传以及下载 1.页面显示代码 <%@ page language="java" import="java ...
- java判断请求是否ajax异步请求
java判断请求是否ajax异步请求 解决方法: if (request.getHeader("x-requested-with") != null && re ...
- Maven 工程 POM.XML文件最全详解
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- 解决Eclipse里的Maven工程pom.xml文件报：web.xml is missing and <failOnMissingWebXml> is set to true错误
打开eclipse准备进行开发时,发现项目上有个红星号,查看错误后发现报了一个:"web.xml is missing and <failOnMissingWebXml> is ...
- Maven工程pom.xml文件秒变gradle工程的命令
下面是一个maven工程,我想把它转成gradle项目,怎么办? 打开cmd命令行窗口,切换到你的maven工程的pom.xml文件所在目录,然后执行如下命令: gradle init --type ...
- java编程(2)——servlet和Ajax异步请求的接口编程（有调用数据库的数据）
第一步: 1.为项目配置 Tomcat 为 server: 2.导入 mysql的jar包 到项目目录中: 第二步:编码 1.数据库连接类ConnectMysql.java代码: package co ...
- java编程（1）——servlet和Ajax异步请求的接口编程（没有调用数据库的数据）
编程应用背景: 使用HttpServlet接口来编写一个动态登录的接口(需要在Tomcat容器发布) 登录的 LoginSample 类代码: package com.zhang.java; publ ...
- Ajax异步请求返回文件流（eg：导出文件时，直接将导出数据用文件流的形式返回客户端供客户下载）
在异步请求中要返回文件流,不能使用JQuery,因为$.ajax,$.post 不支持返回二进制文件流的类型,可以看到下图,dataType只支持xml,json,script,html这几种格式,没 ...
随机推荐
- 关于目前自己iOS项目使用的第三方开源库
1.AFNetworking 目前比较推荐的iOS网络请求组件,默认网络请求是异步,通过block回调的方式对返回数据进行处理. 2.FMDB 对sqlite数据库操作进行了封装,demo也比较简单. ...
- mysql 查找某个表在哪个库
SELECT table_schema FROM information_schema.TABLES WHERE table_name = '表名';
- Appium基于Python unittest自动化测试 & 自动化测试框架 -- PO并生成html测试报告
基于python单元测试框架unittest完成appium自动化测试,生成基于html可视化测试报告 代码示例: #利用unittest并生成测试报告 class Appium_test(unitt ...
- mac中的myeclipse的控制台中文乱码问题解决办法
之前写java用到控制台的主要是字符和数字,中文输入貌似真的还没用过,所以就遇到了一个悲剧的老问题,估计每个程序员都会遇到——中文乱码. 用的是MyEclipse开发环境,Window->Gen ...
- Js中的subStr和subString的区别
/** * Created by lonecloud on 16/9/8. */ var str="HelloWorld"; /** * 这里的两个参数第一个是从0到第几个开始第二 ...
- Spring中的注解@Service @Component @Controller @Repository区别
@Service用于标注业务层组件, @Controller用于标注控制层组件(如struts中的action), @Repository用于标注数据访问组件,即DAO组件, @Component泛指 ...
- Git (gnome-ssh-askpass:3871): Gtk-WARNING **: cannot open display:
在使用Git在客户端使用git push 命令提交文件到github时,出现报错 (gnome-ssh-askpass:): Gtk-WARNING **: cannot open display: ...
- android 如何画心
先前写了一个Windows版的画心,现在想把windows版的画心变成安卓版的. xml布局: <?xml version="1.0" encoding="utf- ...
- 《Android进阶之光》--Android新特性
Android 5.0新特性 1)全新的Material Design设计风格 2)支持多种设备 3)全新的通知中心设计--按照优先级显示 4)支持64位ART虚拟机 5)多任务视窗Overview ...
- 生成1~n的排列
直接递归打印. 代码如下 #include<cstdio> void dfs(int *a,int cur,int n) { if(cur==n) { for(int i=0;i<n ...