Struts2文件上传

最新推荐文章于 2021-05-31 23:17:54 发布

xuying198702

最新推荐文章于 2021-05-31 23:17:54 发布

阅读量454

点赞数 1

分类专栏： JAVA 文章标签： struts2.0

本文链接：https://blog.csdn.net/xuying198702/article/details/49683119

版权

JAVA 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

上传要实现这种效果：

1、form表单提交

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">
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<body>
	<s:form action="doUpload" theme="simple" enctype="multipart/form-data">
		<table>
			<tr>
				<td>file</td>
				<td id="more"><s:file name="file"></s:file> <input
					type="button" value="继续添加.." οnclick="addMore()"></td>
			</tr>
			<tr>
				<td><s:submit value=" submit "></s:submit></td>
				<td><s:reset value=" reset "></s:reset></td>
			</tr>
		</table>
	</s:form>

	<script type="text/javascript">
		function addMore() {
			var len = $('#more br').size();
			if(len==2){
				$.messager.alert('<s:text name="message.warning"/>','最多上传3张图片！');
				return;
			}
			var td = document.getElementById("more");
			var br = document.createElement("br");
			var input = document.createElement("input");
			var button = document.createElement("input");
			input.type = "file";
			input.name = "file";
			button.type = "button";
			button.value = "移除";
			button.onclick = function() {
				td.removeChild(br);
				td.removeChild(input);
				td.removeChild(button);
			}
			td.appendChild(br);
			td.appendChild(input);
			td.appendChild(button);
		}
	</script>
</body>

</html>

页面部分需要注意的是 form里面的method是post，enctype="multipart/form-data"上传文件必须这样写，另外name="file"，批量上传name的值要一样。

Struts.xml 配置

<action name="doUpload" class="uploadAction" method="doUpload">
	<result name="success" type="dispatcher">success.jsp</result><!--这里可添加文件上传拦截器，设置上传文件大小、类型等-->
</action>

后台Bean：

	/**
	 * 上传图片
	 * @return
	 * @throws Exception
	 */
	public String exeUpload() throws Exception {    	
        String imgpath = "/upload/";        
        for (int i = 0; i < file.size(); ++i) {
			InputStream is = new FileInputStream(file.get(i));
			String path = ServletActionContext.getServletContext().getRealPath("/");
			System.out.println(path);
			String fileName = fileFileName.get(i);
			res = res + "," + imgpath + fileName;
			File destFile = new File(path + imgpath, newName);
			OutputStream os = new FileOutputStream(destFile);
			byte[] buffer = new byte[1024];
			int length = 0;
			while ((length = is.read(buffer)) > 0) {
				os.write(buffer, 0, length);
			}
			is.close();
			os.close();
        }
        
        return "success";
    }

2、Ajax提交

页面部分：

<s:form id="form" method="post">
<span style="white-space:pre">	</span><table>
		<tr><td>
			<p style="margin:3px">图片大小不超过2M，支持GIF、JPG、PNG或BMP格式</p>
			<s:file name="file" cssClass="file"></s:file> <a class="J_add" οnclick="addMore()">继续添加...</a> 
		</td></tr>
<span style="white-space:pre">	</span></table>
</s:form>

页面其他部分省略了，最后button点击触发JavaScript方法。

若表单中没有上传文件，可以通过$("#form").serialize()对表单进行序列化，将表单中数据传到服务端。若是有文件，则需要FormData对象实现文件的传递。

JavaScript部分，ajax提交：

function saveFailData(){
	if (!$("#form").form("validate")) {
		return false;
	}
	var fileInputs = $('#form input[name="file"]');//获取到文件列表

	if(checkFiles(fileInputs)){
		return;
	}
	 var formData = new FormData($( "#form" )[0]);
     $.ajax({
          url: '**/doUpload.action' ,
          type: 'POST',
          data: formData,
          async: false,
          cache: false,
          contentType: false,
          processData: false,
          success: function (returndata) {
 	  
          },
          error: function (returndata) {
        
          }
     });

附：验证图片大小和格式的js方法：

function checkFiles(fileInputs){
	var len = fileInputs.length;	
	for(var i = 0; i < len; i++){		
		if(fileInputs[i].files.length==0){
			continue;
		}
		var num = i+1;
		if(fileInputs[i].files[0].type.indexOf('image') === -1){			
			$.messager.alert('<s:text name="message.warning"/>','第'+num +'张凭证，请上传图片格式...');
			return true;
		}
		//检测文件大小是否超过2M
		if(fileInputs[i].files[0].size > 204800){
			$.messager.alert('<s:text name="message.warning"/>','第'+num +'张凭证，图片超过2M...');
			return true;
		}		
	}
}

后台bean&struts.xml同表单提交。