SSH deep Adventure (ix) struts2+dwz+uploadify implementation of multiple files (files and pictures, etc.) upload

Source: Internet
Author: User
Tags button type file upload mongodb ssh

In the Gxpt_uas system, to implement files (files and pictures, etc., can be flexibly configured) batch upload to MongoDB, in the process of learning, learning MongoDB, and realize the function of batch upload, realize the idea: On the basis of DWZ reference to the official examples with the existing GXPT to achieve, during the period read a lot of blogs, for these frameworks, the main study or should be based on document guidance, more look at the official manual (even if the document is very small), more information, overall, can be said that this is the DWZ integration of the plug-in, is mainly JS to achieve, gradually realized the JS, we are the front-end framework of the study is a truth (Easyui, DWZ, ExtJS, etc.), as long as we have a learning mentality, all seemingly new content, we can be as old content learning, knowledge of different architectures, Learning the idea is not changed, the introduction is very fast, the framework does encapsulate a lot of content, gradually in-depth study it, cut to the point:


The file introduced



Front Page: uploadduo.jsp

<span style= "FONT-SIZE:18PX;" >uploaderoption= "{
		
			swf: ' ${contextpath}/styles/dwz/uploadify/scripts/uploadify.swf ',<!--loading the uploaded progress bar file-- >
			
			Uploader: ' ${contextpath}/upload/uploadpicaction.action ',<!--file submitted to background action--
			
			formdata:{ PHPSESSID: ' xxx ', ajax:1},<!--objects and additional data sent to the server-side upload script with each file upload--
			  filesizelimit: ' 200KB ',<!--limit file Size--
			filetypedesc: ' *.jpg;*.jpeg;*.gif;*.png; ',<!--restricted file format--
			filetypeexts: ' *.jpg;*.jpeg;*.gif;*.png; ' ,<!--Limit File Type-
			-fileobjname: ' Picup ',<!--as the name of the file in the action so that it can be injected in--
		
			Queueid: ' Filequeue ',	<!--The name of the Ile object is used in server-side scripting--
			
			buttonimage: ' ${contextpath}/styles/dwz/uploadify/img/add.jpg ',<!-- button picture loading address--
		
			buttonclass: ' My-uploadify-button ',	<!--button type, DWZ encapsulated type, performing the corresponding type--
			width : 102,
			
			auto:false<!--whether the automatic upload file is added to the queue, false cannot be automatically uploaded, into the queue, true auto upload-
		"</span>



<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" ><!--Photo Collection 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></span></span>


Treatment: Uploadpicaction


<span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;" ><span style= "FONT-SIZE:18PX;"
	>private File Picup;
	File name (can upload files including pictures, etc.) private String picupfilename;
The type of file (Struts2 frame comes with properties) private String picupcontenttype;
	Get file full information public files Getpicup () {return picup;
	}//Inject file full information you public void Setpicup (file picup) {This.picup = Picup;
	}//Get file name public String Getpicupfilename () {return picupfilename;
	}//inject file name public void Setpicupfilename (String picupfilename) {this.picupfilename = Picupfilename;
	}//Get file type public String Getpicupcontenttype () {return picupcontenttype;
	}//injected file type public void Setpicupcontenttype (String picupcontenttype) {this.picupcontenttype = Picupcontenttype;
            /** * Upload image * @MethodName: Uploadpic * @Description: File Bulk Upload method */public void Uploadpic () {try {
            Constructs the Picture property, 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);
            The filename attribute is stored in the value uploadfilename map.put ("filename", picupfilename);
            Map.put ("ContentType", Picupcontenttype);
            Instantiate the Mongoeao object Mongoutil Mongoeao = new Mongoutil ();
            
            
            Call the background Add method, write to the MongoDB database Mongoeao.uploadfile (Picup, picupfilename+ "_new", "Gxpt_uas", "uasstupic", map);
            The enctype= "Multipart/form-data" was set when the form was submitted, so the ContentType received from the request has been formatted, For Content-type:multipart/form-data;
            boundary=-------7de6d232f022a, so contenttype System.out.println (Request.getcontenttype ()) is reset in response;
            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 Bulk Upload Method */
	public void Uploadpic () {try {//Construct Picture property, key is property name, value is property value, property is arbitrary.
           linkedhashmap<string, object> map = new linkedhashmap<string, object> ();
            System.out.println (Picupfilename);
            The filename attribute is stored in the value uploadfilename map.put ("filename", picupfilename);
            Map.put ("ContentType", Picupcontenttype);
            Instantiate the Mongoeao object Mongoutil Mongoeao = new Mongoutil ();
            
            
            Call the background Add method, write to the MongoDB database Mongoeao.uploadfile (Picup, picupfilename+ "_new", "Gxpt_uas", "uasstupic", map);
            The enctype= "Multipart/form-data" was set when the form was submitted, so the ContentType received from the request has been formatted, For Content-type:multipart/form-data;
            boundary=-------7de6d232f022a, so contenttype System.out.println (Request.getcontenttype ()) is reset in response;
            Response.setcontenttype ("Text/html;charset=utf-8"); Outmsg (Ajaxobject.newok (commonconstant.opetate_success). sEtcallbacktype (""). toString ());
        } catch (Exception e) {e.printstacktrace (); }}</span></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/dtd S/struts-2.0.dtd "> <struts> <constant name=" struts.multipart.maxSize "value=" 20971520 "/> <!-- Avatar Upload Management--<package name= "Uploadmgr" namespace= "/upload" extends= "Default" > <!--upload image Begin-- > <!--index page link, jump to upload page-<action name= "showpicmgraction" class= "uploadpicaction" method= "Showpicmgr" > <result name= "picmgr" >/page/uploadify/uploadPic.jsp</result> </action> <!--index Bulk page link, jump To upload page--<action name= "showpicmgrpiliangaction" class= "uploadpicaction" method= "showpicmgr" > <result na Me= "Picmgr" >/page/uploadify/uploadDuo.jsp</result> </action> <!--index Bulk page link, jump to upload page--<a ction name= "showpicmgrpiliangoldaction" class= "Uploadpicaction" method= "Showpicmgr" > <result name= "picmgr" >/page/uploadify/uploadOldDuo.jsp</result> </action> & lt;! --Upload Pictures--<action name= "uploadpicaction" class= "uploadpicaction" method= "Uploadpic" > </action> < !--upload Pictures-<action name= "uploadpicoldaction" class= "uploadpicaction" method= "Uploadpicold" > </action&gt
		; <!--Query the specified picture, return picture--<action name= "getpicbyidaction" class= "uploadpicaction" method= "Getpicbyid" > </ac
			Tion> <!--Search All pictures-<action name= "showallpicaction" class= "uploadpicaction" method= "Showallpic" > <result name= "Piclist" >/page/uploadify/fileList.jsp</result> </action> <!--query the specified picture, return to the JSP page-- > <action name= "showpicbyidaction" class= "uploadpicaction" method= "Showpicbyid" > <result name= "picList" & Gt;/page/uploadify/filelist.jsp</result> </action> <!--Delete the specified picture-<action name= "Deletepicby Idaction "class=" UPLOadpicaction "method=" Deletepicbyid "> </action> <!--batch Delete pictures--<action name=" deletepicbyidsact





Ion "class=" Uploadpicaction "method=" Deletepicbyids "> </action> <!--upload pictures end-to-</package> </struts></span>




Spring-studentpic.xml, configuring, controlling reflection Injection

<span style= "FONT-SIZE:18PX;" ><!--Uploading Pictures  -
    <bean id= "uploadpicaction" class= "Web.uas.UploadPic.Action.UploadPicAction" Scope= "Prototype" >
     	
   </bean>
   </span>


Effect Diagram


File submitted successfully


Summarize

This effect, is still good, a lot of content it is encapsulated into the framework, for multi-file upload, each file will invoke the back-end action method, this is the perfect combination of its and Struts2, careful + document = implementation, this part of the content still need our many practical, For the framework to use more learning to learn more, more harvest.

Contact (ssh+web) framework for about 1.5 months, the overall can realize that the framework to solve a problem, provides a good solution, simplifying the developers write code granularity, we have to stop, gradually thinking about the principle of the framework? Wait, that's what we really need to improve. First, of course, is a very important first step in getting started.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.