Java SSH Project Summary-Struts2 upload image group, sshstruts2

Java SSH Project Summary-Struts2 upload image group, sshstruts2
Preface

 

Upload 5 images in a form to belong to 5 categories. In the Strust2 form, the name attribute of the file control is the same. Multiple images and the category information of the image are submitted, the background obtains the array information of the uploaded file, and saves the image and category information to complete the image upload function.

 

Body

 

Front-end page

 

Front-end code

 

</Pre> <pre name = "code" class = "html"> <s: form id = "fileForm" name = "fileForm" enctype = "multipart/form-data" method = "post"> <table class = "table-bordered table-striped" style = "border: # cdcdcd 1px solid; text-align: center; "align =" center "> <tr> <td> <font color =" red "> * </font> Class 1: <div> <input id = "materialTypeName" name = "materialTypeName1" type = "radio" value = "corporate legal person business license" checked/> corporate legal person business license <input id =" materialTypeName "name =" materialTypeName1 "type =" radio "value =" "/> <input id =" materialTypeName "name =" materialTypeName1 "type = ""radio" value = "private non-enterprise registration certificate"/> private non-enterprise registration certificate <br/> <input id = "materialTypeName" name = "materialTypeName1" type = "radio" value = "Social Group Legal Entity Registration Certificate"/> social group legal entity registration certificate <input id = "materialTypeName" name = "materialTypeName1" type = "radio" value =" individual Business License "/> individual business license <input id =" materialTypeName "name =" materialTypeName1 "type =" radio "value =" other "/> Other <label class = "control-label"> </label> <div align = "right"> <s: file id = "file1" label = "File (1) "name =" uploads "/> </div> <input id =" materialType1 "name =" materialType1 "type =" hidden "value =" "/> </td> </tr> <td> <div align = left> <font color = "red"> * </font> Class II: <label style = "font-size: 12px;"> Organization Code of the People's Republic of China </label> <div align = "right"> <s: file id = "file2" label = "File (2) "name =" uploads "/> </div> <input id =" materialType2 "name =" materialType1 "type =" hidden "value =" "/> <input id = "materialTypeName2" name = "materialTypeName1" type = "hidden" value = ""/> </td> </tr> <td> <div align = left> <font color = "red"> * </font> three types: <label style = "font-size: 12px;"> ID card of the legal representative </label> <div align = "right"> <s: file id = "file3" label = "File (3) "name =" uploads "/> </div> <input id =" materialType3 "name =" materialType1 "type =" hidden "value =" "/> <input id = "materialTypeName3" name = "materialTypeName1" type = "hidden" value = ""/> </td> </tr> <td> <div align = left> four types: <label style = "font-size: 12px;"> labor dispatch experience permit </label> <div align = "right"> <s: file id = "file4" label = "File (4) "name =" uploads "/> </div> <input id =" materialType4 "name =" materialType1 "type =" hidden "value =" "/> <input id = "materialTypeName4" name = "materialTypeName1" type = "hidden"/> </td> </tr> <td> <div align = left> Category 5: <label style = "font-size: 12px;"> others </label> <div align = "right"> <s: file id = "file5" label = "File (5) "name =" uploads "/> </div> <input id =" materialType5 "name =" materialType1 "type =" hidden "value =" "/> <input id = "materialTypeName5" name = "materialTypeName1" type = "hidden"/> </td> </tr> <td> <div align = "center"> <input id = "picButton" type = "button" value = "Submit Application" onclick = "validate () "class =" btn-primary "> </input> </div> </td> </tr> </table> </s: form>

 

 

 

The core code of the front-end is the following file tag array, with the same name attribute. In this way, you can submit images to the action class in batches to receive image arrays.

<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 Code

 

In js, we verified the format of the uploaded image and obtained the information about the category of each image. Then, we submitted the image and category information in the Form.

 

// Verify the image format function validateFileFormat () {// obtain the file path 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 = /\. [^ \.] + $ /. exe C (filepath4); var filepath5 = document. getElementById ('file5 '). value; var d5 = /\. [^ \.] + $ /. exec (filepath5); // to avoid escape backslash problems, convert var tp = ".jpg, .image,.gif, .png, .bmp ,. JPG ,. GIF ,. BMP ,. IMAGE ,. JPEG ,. PNG "; // return the position of the qualified Suffix in the string 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); // if the returned result is greater than or equal to 0, it indicates the file type that can be uploaded if (rs1> = 0) {if (rs2> = 0) {If (rs3> = 0) {if (filepath4 = "") {if (filepath5 = "") {return true;} else {if (rs5> = 0) {return true;} else {alert ("the five types of scanned copies are not valid image formats! "); Return false ;}}else {if (rs4> = 0) {if (filepath5 =" ") {return true ;} else {if (rs5> = 0) {return true;} else {alert ("the five types of scanned copies you selected are not in valid image format! "); Return false ;}}else {alert (" the four types of scanned copies are not in valid image format! "); Return false ;}}else {alert (" the three types of scanned copies are not in valid image format! "); Return false ;}} else {alert (" the scanned copy you selected is not a valid image format! "); Return false ;}} else {alert (" the scanned copy you selected is not a valid image format! "); Return false ;}}// Upload File verification 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 ("Select Upload File: Class 1"); return false;} else {document. getElementById ('materialtype1'). value = "1";} if (! FileName2) {alert ("Select Upload File: Class II"); return false;} else {document. getElementById ('materialtype2 '). value = "2"; document. getElementById ('materialtypename2 '). value = "Organization Code of the People's Republic of China";} if (! FileName3) {alert ("Select Upload File: Class 3"); return false;} else {document. getElementById ('materialtype3 '). value = "3"; document. getElementById ('materialtypename3 '). value = "Legal Representative ID card";} if (fileName4) {document. getElementById ('materialtype4 '). value = "4"; document. getElementById ('materialtypename4 '). value = "labor dispatch experience Permit"; // alert (document. getElementById ('materialtypename4 '). value)} if (fileName5) {document. getElementById ('materialtype5 '). value = "5"; document. getElementById ('materialtypename5 '). value = "other"; // alert (document. getElementById ('materialtypename5 '). value)} return true;} // upload the image function validate () {// verify that the image format is correct var flag = validateFileFormat (); if (flag = true) {// alert ("the image format is correct and the result is:" + flag); // var flagss = fileValidate (); if (flagss = true) {// alert ("final verification of Image Upload; Result:" + flagss); // alert ("file to be uploaded"); // submit document in the file form. fileForm. action = "companyMaterial_add.action"; document. fileForm. submit ();}}}

 

 

 

 

Methods in action

 

In the action class, we use the get and set methods to inject File Upload attributes into this action class, including uploads, uploadsContentType, uploadsFileName, note that uploads is the name of the front-end tag and must be consistent. After obtaining the information of the uploaded file, we will upload the file to the specified folder on the server, and then save the file information to the database.

 

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; // upload the set text private List of multiple files <String> uploadsContentType; /// Private List of multiple upload files <String> uploadsFileName; // private List of file names of multiple upload files <String> materialTypeName1; private List <String> materialType1; /** add */public String add () throws Exception {// obtain the information of the user uploading materials from the session. CompanyInfo returncompanyInfo = this. getCompanyInfo (); String comId = returncompanyInfo. getOrganizationCode (); String socId = returncompanyInfo. getSocialNumber (); CompanyInfo companyInfo = new C OmpanyInfo (); // obtain the first type of material Category and name List <String> materialTypeList = this. getMaterialType1 (); List <String> materialTypeNameList = this. getMaterialTypeName1 (); // print the attribute System of the file array submitted by the front-end form. out. println (uploadsFileName); System. out. println (materialTypeList); System. out. println (materialTypeNameList); // put the uploaded file in the specified path String path = ServletActionContext. getServletContext (). getRealPath ("/uploadImages"); // write it to the specified path File f Ile = new File (path); // if the specified path does not exist, create if (! File. exists () {file. mkdirs ();} // read the obtained object set in a loop and put it in the specified path System. out. println (uploads. size (); for (int I = 0; I <uploads. size (); I ++) {try {Date date = new Date (); // the list set obtains the index System through get (I. out. println (uploadsFileName. get (I); SimpleDateFormat stingDateFormat = new SimpleDateFormat ("yyyyMMddHHmmss"); String wordfileadd = stingDateFormat. format (date) + socId + uploadsFileName. get (I); FileU Tils. copyFile (uploads. get (I), new File (file, wordfileadd);} catch (IOException e) {e. printStackTrace () ;}// Save the material to the database String fileFolder = "\" + "jyzgcx" + "\" + "uploadImages" + "\\"; int n = uploadsFileName. size (); // call the method to save the material to the database this. doSaveAll (companyInfo, materialTypeList, materialTypeNameList, uploadsFileName, fileFolder, n); System. out. println ("~~~~~~~~~~~~~~ Uploaded successfully! "); Return" repeatLogin ";} // Save the image to the database 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 ;}}

 

Summary

 

In the Strust2 form, the name attribute of the file control is the same. Multiple images are submitted, and the file array is obtained in the background to complete the image upload function. As a result, as long as the name attribute of the front-end control is the same, we can obtain the value of the control array with the same front-end name attribute in the background, knowing that this is indeed much more convenient to use.