SSH deep adventure (9) Struts2 + DWZ + Uploadify multi-file (file, image, etc.) Upload

In the gxpt_uas system, files (files and images can be flexibly configured) must be uploaded to mongodb in batches. In the process of learning this, I learned mongodb, the batch upload function is also implemented. The implementation idea is as follows: Based on DWZ, refer to the official instance and use the existing GXPT. During this period, I read a lot of blogs. For these frameworks, the main learning method should be document Guidance. Read more official manuals (even if there are few documents) and check more information. In general, we can say this is a plug-in integrated by DWZ, it is mainly implemented by js, and gradually realized that JS is amazing. We learn these front-end frameworks in a rational way (easyui, DWZ, ExtJs, etc ), as long as we have a learning idea and all seemingly new content, we can all learn from old content. Different knowledge structures, the learning idea remains unchanged, and the entry is still very fast, the framework indeed encapsulates a lot of content. For more details, see the topic:

Imported File

Front-end page: uploadDuo. jsp

<Span style = "font-size: 18px;"> uploaderOption = "{swf: '$ {contextPath}/styles/dwz/uploadify/scripts/uploadify.swf', <! -- Load the file of the upload progress bar --> uploader: '$ {contextPath}/upload/uploadPicAction. action', <! -- File submitted to the background action --> formData: {PHPSESSID: 'xxx', ajax: 1}, <! -- Object and extra data are sent to the server upload script and each file upload --> fileSizeLimit: '200kb', <! -- Restrict File size --> fileTypeDesc: '*. jpg; *. jpeg; *. gif; *. png;', <! -- Restrict File Format --> fileTypeExts: '*. jpg; *. jpeg; *. gif; *. png;', <! -- Restrict file types --> fileObjName: 'picup', <! -- The file name in the action is the same, so that the file can be injected. --> queueID: 'filequeue ', <! -- The ile object name is used in the server script --> buttonImage: '$ {contextPath}/styles/dwz/uploadify/img/add.jpg', <! -- Button image loading address --> buttonClass: 'My-uploadify-click', <! -- Button type, DWz encapsulated type, execute the corresponding type --> width: 102, auto: false <! -- Whether to automatically upload files to the queue. If it is set to false, files cannot be automatically uploaded to the queue. If it is set to true, files are automatically uploaded. -- >}" </span>

<Span style = "font-size: 18px;"> <span style = "font-size: 18px;"> <span style = "font-size: 18px; "> <! -- Photo album access location --> <div id = "fileQueue" class = "fileQueue"> </div> <input type = "image" src = "$ {contextPath}/styles/ dwz/uploadify/img/upload.jpg "onclick =" $ ('# testFileInput2 '). uploadify ('upload ','*'); "/> <input type =" image "src =" $ {contextPath}/styles/dwz/uploadify/img/cancel.jpg "onclick =" $ ('# testfileinput2 '). uploadify ('cancel', '*'); "/> <div class =" divider "> </div> </span>

Processing: UploadPicAction

<Span style = "font-size: 18px;"> <span style = "font-size: 18px;"> <span style = "font-size: 18px; "> private File picUp; // File name (you can upload files containing images, etc.) private String picUpFileName; // File type (attributes inherent in the struts2 framework) private String picUpContentType; // obtain the full File information. public File getPicUp () {return picUp;} // inject the full File information. You are public void setPicUp (File picUp) {this. picUp = picUp;} // obtain the file name public String getPicUpFileName () {return picUpFileName;} // inject the file name public Void setPicUpFileName (String picUpFileName) {this. picUpFileName = picUpFileName;} // obtain the file type public String getPicUpContentType () {return picUpContentType;} // inject the file type public void setPicUpContentType (String picUpContentType) {this. picUpContentType = picUpContentType;}/*** upload image * @ MethodName: uploadPic * @ Description: Method for uploading objects in batches */public void uploadPic () {try {// construct image attributes, key is the property name, value is the property value, and the property is arbitrary. LinkedHashMap <String, Object> map = new LinkedHashMap <String, Object> (); System. out. println (picUpFileName); // save it to the filename attribute with the value of uploadFileName map. put ("filename", picUpFileName); map. put ("contentType", picUpContentType); // The MongoEao object that instantiates MongoUtil mongoEao = new MongoUtil (); // calls the method added in the background and writes it to mongoEao in the mongodb database. uploadFile (picUp, picUpFileName + "_ new", "gxpt_uas", "uasStuPic", map); // enctype is set when the form is submitted = "Multipart/form-data". Therefore, the ContentType obtained from the request has changed the format. // It is Content-Type: multipart/form-data; boundary = ------- 7de6d232f022a, therefore, reset ContentType System in response. out. println (request. getContentType (); response. setContentType ("text/html; charset = UTF-8"); outMsg (AjaxObject. newOk (CommonConstant. OPETATE_SUCCESS ). setCallbackType (""). toString ();} catch (Exception e) {e. printStackTrace () ;}}/*** upload image * @ MethodName: uploadPic * @ Description: file batch upload Method */public void uploadPic () {try {// construct image attributes. key is the attribute name, value is the attribute value, and the attribute is arbitrary. LinkedHashMap <String, Object> map = new LinkedHashMap <String, Object> (); System. out. println (picUpFileName); // save it to the filename attribute with the value of uploadFileName map. put ("filename", picUpFileName); map. put ("contentType", picUpContentType); // The MongoEao object that instantiates MongoUtil mongoEao = new MongoUtil (); // calls the method added in the background and writes it to mongoEao in the mongodb database. uploadFile (picUp, picUpFileName + "_ new", "gxpt_uas", "uasStuPic", map); // enctype = "multipart/form-data" is set when the form is submitted ", therefore, the ContentType obtained from the request has changed the format, // is Content-Type: multipart/form-data; boundary = ------- 7de6d232f022a, so you can reset ContentType System in response. out. println (request. getContentType (); response. setContentType ("text/html; charset = UTF-8"); outMsg (AjaxObject. newOk (CommonConstant. OPETATE_SUCCESS ). setCallbackType (""). toString ();} catch (Exception e) {e. printStackTrace () ;}</span> </span>

Struts-studentPic.xml:

<Span style = "font-size: 18px;"> <? Xml version = "1.0" encoding = "UTF-8"?> <! DOCTYPE struts PUBLIC "-// Apache Software Foundation // DTD Struts Configuration 2.0 // EN" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <constant name = "struts. multipart. maxSize "value =" 20971520 "/> <! -- Avatar upload Management --> <package name = "uploadMgr" namespace = "/upload" extends = "default"> <! -- Upload an image begin --> <! -- Index page Link, go to the upload page --> <action name = "showPicMgrAction" class = "uploadPicAction" method = "showPicMgr"> <result name = "picMgr">/page/uploadify/uploadPic. jsp </result> </action> <! -- Index batch Page Link, go to the upload page --> <action name = "showPicMgrPiLiangAction" class = "uploadPicAction" method = "showPicMgr"> <result name = "picMgr">/page/uploadify/uploadDuo. jsp </result> </action> <! -- Index batch Page Link, go to the upload page --> <action name = "showPicMgrPiLiangOldAction" class = "uploadPicAction" method = "showPicMgr"> <result name = "picMgr">/page/uploadify/uploadOldDuo. jsp </result> </action> <! -- Upload an image --> <action name = "uploadPicAction" class = "uploadPicAction" method = "uploadPic"> </action> <! -- Upload an image --> <action name = "uploadPicOldAction" class = "uploadPicAction" method = "uploadPicOld"> </action> <! -- Query the specified image and return the image --> <action name = "getPicByIdAction" class = "uploadPicAction" method = "getPicById"> </action> <! -- Query all images --> <action name = "showAllPicAction" class = "uploadPicAction" method = "showAllPic"> <result name = "picList">/page/uploadify/fileList. jsp </result> </action> <! -- Query the specified image, return to the jsp page --> <action name = "showPicByIdAction" class = "uploadPicAction" method = "showPicById"> <result name = "picList">/page/uploadify/fileList. jsp </result> </action> <! -- Delete a specified image --> <action name = "deletePicByIdAction" class = "uploadPicAction" method = "deletePicById"> </action> <! -- Batch delete images --> <action name = "deletePicByIdsAction" class = "uploadPicAction" method = "deletePicByIds"> </action> <! -- Upload image end --> </package> </struts> </span>

Spring-studentPic.xml, configuration, Control Reflection Injection

<Span style = "font-size: 18px;"> <! -- Upload an image --> <bean id = "uploadPicAction" class = "web. uas. UploadPic. Action. UploadPicAction" scope = "prototype"> </bean> </span>

File submitted

Summary

This effect is good. A lot of content is encapsulated in the framework. For multi-file uploads, each file will call the background action method, this is also a perfect combination of Struts2 and Struts2. Be careful + document = implementation. This part of content still requires a lot of practical practices. For the framework, you need to learn more and get more results.

I have been in touch with the (SSH + Web) framework for about half a month. On the whole, I can understand that the Framework solves a certain problem and provides a good solution, which simplifies the coding granularity of developers, at this moment, we have to stop and gradually think about the principles of the Framework? Why? Thoughts? This is what we really need to improve. Of course, first use is an important first step for getting started.