本文介绍如何在Struts2框架中实现多张图片及对应类别的批量上传功能，包括前端表单设计、图片格式验证及后端处理逻辑。
前言
在一个表单中上传5张图片分别隶属于5类别，在Strust2表单中赋予file控件的name属性一样，实现多张图片与该图片隶属的类别信息进行提交，后台获取上传文件的数组信息，然后将图片和类别信息进行保存，完成图片上传的功能。
正文
前台页面
前台代码
</pre><pre name="code" class="html"><s:form id="fileForm" name="fileForm" enctype="multipart/form-data" method="post" >
<table class="table table-bordered table-striped"
style="border: #cdcdcd 1px solid; text-align: center;"
align="center">
<tr>
<td>
<font color="red">*</font>一类：
<div>
<input id="materialTypeName" name="materialTypeName1"
type="radio" value="企业法人营业执照" checked/>
企业法人营业执照
<input id="materialTypeName" name="materialTypeName1"
type="radio" value="事业单位法人证书" />
事业单位法人证书
<input id="materialTypeName" name="materialTypeName1"
type="radio" value="民办非企业单位登记证书" />
民办非企业单位登记证书
<br />
<br />
<input id="materialTypeName" name="materialTypeName1"
type="radio" value="社会团体法人登记证书" />
社会团体法人登记证书
<input id="materialTypeName" name="materialTypeName1"
type="radio" value="个人工商户营业执照" />
个人工商户营业执照<input id="materialTypeName" name="materialTypeName1"
type="radio" value="其它" />
其它
<label class="control-label"></label>
<div align="right">
<s:file id="file1" label="File(1)" name="uploads" />
</div>
</div>
<input id="materialType1" name="materialType1" type="hidden"
value="" />
</td>
</tr>
<tr>
<td>
<div align=left>
<font color="red">*</font>二类：
<label style="font-size: 12px;">
中华人民共和国组织机构代码
</label>
<div align="right">
<s:file id="file2" label="File(2)" name="uploads" />
</div>
</div>
<input id="materialType2" name="materialType1" type="hidden"
value="" />
<input id="materialTypeName2" name="materialTypeName1"
type="hidden" value="" />
</td>
</tr>
<tr>
<td>
<div align=left>
<font color="red">*</font>三类：
<label style="font-size: 12px;">
法定代表人身份证
</label>
<div align="right">
<s:file id="file3" label="File(3)" name="uploads" />
</div>
</div>
<input id="materialType3" name="materialType1" type="hidden"
value="" />
<input id="materialTypeName3" name="materialTypeName1"
type="hidden" value="" />
</td>
</tr>
<tr>
<td>
<div align=left>
四类：
<label style="font-size: 12px;">
劳务派遣经验许可证
</label>
<div align="right">
<s:file id="file4" label="File(4)" name="uploads" />
</div>
</div>
<input id="materialType4" name="materialType1" type="hidden"
value="" />
<input id="materialTypeName4" name="materialTypeName1"
type="hidden" />
</td>
</tr>
<tr>
<td>
<div align=left>
五类：
<label style="font-size: 12px;">
其它
</label>
<div align="right">
<s:file id="file5" label="File(5)" name="uploads" />
</div>
</div>
<input id="materialType5" name="materialType1" type="hidden"
value="" />
<input id="materialTypeName5" name="materialTypeName1"
type="hidden" />
</td>
</tr>
<tr>
<td>
<div align="center">
<input id="picButton" type="button" value="提交申请" onclick="validate()" class="btn btn-primary"></input>
</div>
</td>
</tr>
</table>
</s:form>
前端的核心代码是下面的这个file标签数组，name属性一样，这样就可以将图片批量提交到action，action类中接收图片数组。
<s:fileid="file1" label="File(1)" name="uploads" />
<s:fileid="file2" label="File(2)" name="uploads" />
<s:fileid="file3"label="File(3)"name="uploads" />
<s:fileid="file4"label="File(4)"name="uploads" />
<s:fileid="file5"label="File(5)"name="uploads" />
Js代码
在js中我们对上传图片的格式进行了验证，同时得到每张图片所属类别的信息，然后将图片和类别信息进行Form表单提交
//验证图片格式
function validateFileFormat(){
//获取欲上传的文件路径
var filepath1 = document.getElementById('file1').value;
var d1=/\.[^\.]+$/.exec(filepath1);
var filepath2 = document.getElementById('file2').value;
var d2=/\.[^\.]+$/.exec(filepath2);
var filepath3 = document.getElementById('file3').value;
var d3=/\.[^\.]+$/.exec(filepath3);
var filepath4 = document.getElementById('file4').value;
var d4=/\.[^\.]+$/.exec(filepath4);
var filepath5 = document.getElementById('file5').value;
var d5=/\.[^\.]+$/.exec(filepath5);
//为了避免转义反斜杠出问题，这里将对其进行转换
var tp =".jpg,.image,.gif,.jpeg,.png,.bmp,.JPG,.GIF,.BMP,.IMAGE,.JPEG,.PNG";
//返回符合条件的后缀名在字符串中的位置
var rs1=tp.indexOf(d1);
var rs2=tp.indexOf(d2);
var rs3=tp.indexOf(d3);
var rs4=tp.indexOf(d4);
var rs5=tp.indexOf(d5);
//如果返回的结果大于或等于0，说明包含允许上传的文件类型
if(rs1>=0){
if(rs2>=0){
if(rs3>=0){
if(filepath4==""){
if(filepath5==""){
return true;
}else{
if(rs5>=0){
return true;
}else{
alert("您选择五类型的扫描件不是有效的图片格式!");
return false;
}
}
}else{
if(rs4>=0){
if(filepath5==""){
return true;
}else{
if(rs5>=0){
return true;
}else{
alert("您选择五类型的扫描件不是有效的图片格式!");
return false;
}
}
}else{
alert("您选择四类型的扫描件不是有效的图片格式!");
return false;
}
}
}else{
alert("您选择三类型的扫描件不是有效的图片格式!");
return false;
}
}else{
alert("您选择二类型的扫描件不是有效的图片格式!");
return false;
}
}else{
alert("您选择一类型的扫描件不是有效的图片格式!");
return false;
}
}
//上传文件验证
function fileValidate(){
var fileName1=document.getElementById('file1').value;
var fileName2=document.getElementById('file2').value;
var fileName3=document.getElementById('file3').value;
var fileName4=document.getElementById('file4').value;
var fileName5=document.getElementById('file5').value;
if(!fileName1)
{
alert("请选择上传文件：一类");
return false;
}else{
document.getElementById('materialType1').value="1";
}
if(!fileName2)
{
alert("请选择上传文件：二类");
return false;
}else{
document.getElementById('materialType2').value="2";
document.getElementById('materialTypeName2').value="中华人民共和国组织机构代码";
}
if(!fileName3)
{
alert("请选择上传文件：三类");
return false;
}else{
document.getElementById('materialType3').value="3";
document.getElementById('materialTypeName3').value="法定代表人身份证";
}
if(fileName4)
{
document.getElementById('materialType4').value="4";
document.getElementById('materialTypeName4').value="劳务派遣经验许可证";
//alert(document.getElementById('materialTypeName4').value)
}
if(fileName5)
{
document.getElementById('materialType5').value="5";
document.getElementById('materialTypeName5').value="其它";
//alert(document.getElementById('materialTypeName5').value)
}
return true;
}
//上传图片
function validate(){
//验证图片格式是否正确
var flag=validateFileFormat();
if(flag==true){
//alert("图片格式是正确，结果是："+flag);
//图片上传的参数准备
var flagss=fileValidate();
if(flagss==true){
//alert("图片上传最后的验证，结果是："+flagss);
//alert("文件要上传了");
//文件表单提交
document.fileForm.action="companyMaterial_add.action";
document.fileForm.submit();
}
}
}
action中的方法
在action类中，我们利用get和set方法将文件上传的属性注入到此action类中，包括uploads、uploadsContentType、uploadsFileName，要注意的是uploads是前台标签的的name，一定要保持一致。得到上传的文件的信息后，我们将文件上传的服务器指定的文件夹下，然后将文件的信息保存到数据库中。
package cn.bjjczb.jyzgcx.view.action;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;
import org.apache.commons.io.FileUtils;
import org.apache.struts2.ServletActionContext;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import com.opensymphony.xwork2.ActionContext;
import cn.bjjczb.jyzgcx.base.BaseAction;
import cn.bjjczb.jyzgcx.domain.CompanyInfo;
import cn.bjjczb.jyzgcx.domain.CompanyMaterial;
import cn.bjjczb.jyzgcx.domain.DictionaryTitle;
import cn.bjjczb.jyzgcx.domain.ReplyResult;
@Controller
@Scope("prototype")
public class CompanyMaterialAction extends BaseAction<CompanyMaterial> {
private List<File> uploads; // 上传多个文件的集合文本
private List<String> uploadsContentType; // /多个上传文件的类型集合
private List<String> uploadsFileName; // 多个上传文件的文件名集合
private List<String> materialTypeName1;
private List<String> materialType1;
/** 添加*/
public String add() throws Exception {
//从session中得到上传材料的用户的信息
CompanyInfo returncompanyInfo = this.getCompanyInfo();
String comId=returncompanyInfo.getOrganizationCode();
String socId=returncompanyInfo.getSocialNumber();
CompanyInfo companyInfo=new CompanyInfo();
//得到第一类型的材料类别和名称
List<String> materialTypeList=this.getMaterialType1();
List<String> materialTypeNameList=this.getMaterialTypeName1();
//打印前台表单提交过来的文件数组的属性
System.out.println(uploadsFileName);
System.out.println(materialTypeList);
System.out.println(materialTypeNameList);
// 把上传的文件放到指定的路径下
String path = ServletActionContext.getServletContext().getRealPath("/uploadImages");
// 写到指定的路径中
File file = new File(path);
// 如果指定的路径没有就创建
if (!file.exists()) {
file.mkdirs();
}
// 把得到的文件的集合通过循环的方式读取并放在指定的路径下
System.out.println(uploads.size());
for (int i = 0; i < uploads.size(); i++) {
try {
Date date=new Date();
//list集合通过get(i)的方式来获取索引
System.out.println(uploadsFileName.get(i));
SimpleDateFormat stingDateFormat = new SimpleDateFormat("yyyyMMddHHmmss");
String wordfileadd = stingDateFormat.format(date)+socId+uploadsFileName.get(i);
FileUtils.copyFile(uploads.get(i), new File(file, wordfileadd));
} catch (IOException e) {
e.printStackTrace();
}
}
//保存材料到数据库
String fileFolder = "\\"+"jyzgcx"+"\\"+"uploadImages"+"\\";
int n=uploadsFileName.size();
//调用方法保存材料到数据库
this.DoSaveAll(companyInfo, materialTypeList, materialTypeNameList, uploadsFileName, fileFolder, n);
System.out.println("~~~~~~~~~~~~~~上传成功！");
return "repeatLogin";
}
//保存图片到数据库
public void DoSaveAll(CompanyInfo companyInfo,List<String> materialTypeList,List<String> materialTypeNameList,List<String> uploadsFileName,String fileFolder,int s){
Date date=new Date();
SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String createTime = formatter.format(date);
CompanyMaterial companyMaterial = null;
CompanyInfo returncompanyInfo = this.getCompanyInfo();
String comId=returncompanyInfo.getOrganizationCode();
String socId=returncompanyInfo.getSocialNumber();
SimpleDateFormat stingDateFormat = new SimpleDateFormat("yyyyMMddHHmmss");
String wordfileadd = stingDateFormat.format(date)+socId;
for (int i = 0; i < s; i++) {
companyMaterial=new CompanyMaterial();
companyMaterial.setCompanyInfo(companyInfo);
companyMaterial.setState("1");
companyMaterial.setCreateDate(createTime);
companyMaterial.setMaterialType(materialTypeList.get(i));
companyMaterial.setMaterialTypeName(materialTypeNameList.get(i));
companyMaterial.setFileName(wordfileadd+uploadsFileName.get(i));
companyMaterial.setFileUrl(fileFolder+wordfileadd+uploadsFileName.get(i));
companyMaterialService.save(companyMaterial);
}
}
public List<String> getMaterialTypeName1() {
return materialTypeName1;
}
public void setMaterialTypeName1(List<String> materialTypeName1) {
this.materialTypeName1 = materialTypeName1;
}
public List<String> getMaterialType1() {
return materialType1;
}
public void setMaterialType1(List<String> materialType1) {
this.materialType1 = materialType1;
}
public List<File> getUploads() {
return uploads;
}
public void setUploads(List<File> uploads) {
this.uploads = uploads;
}
public List<String> getUploadsContentType() {
return uploadsContentType;
}
public void setUploadsContentType(List<String> uploadsContentType) {
this.uploadsContentType = uploadsContentType;
}
public List<String> getUploadsFileName() {
return uploadsFileName;
}
public void setUploadsFileName(List<String> uploadsFileName) {
this.uploadsFileName = uploadsFileName;
}
}
小结
我们在Strust2的表单中赋予file控件的name属性一样，实现多张图片进行提交，后台获取file数组，完成图片上传的功能。由此拓展出来，只要前台控件的name属性一样，我们就可以在后台获取前台的name属性一样的控件数组的值，知道这一点用起来确实会方便很多。
扫一扫
2363
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
