Multipart/form-data multiple File Upload

1.htmlAnction as back-end path

Enctype= "Multipart/form-data" for file submission type

 <form action= "/appstore/file/upload" name= "MyForm" id= "Fileform" enctype= "Multipart/form-data" method= "POST" class= "Form-horizontal" > <!--START panel--> <div class= "Panel Panel-default" &

                    Gt
                        <input type= "text" name= "id" value= "{{id}}" hidden> <div class= "panel-heading" >  <div class= "Panel-title" > Upload file </div> </div> <div class= "Panel-body" > <fieldset> <div class= "Form-group"
                                ; <label class= "Col-sm-2 Control-label" > Android installation package </label> <div class= "col-sm-6" &G
                                    T
                            <input type= "File" accept= "apk" name= "Apkfile" required= "required"/> </div>

              </div>              <div class= "Form-group" > <label class= "col-sm-2 Control-label" > Apple Fruit installation package </label> <div class= "col-sm-6" > <in
                            Put type= "file" accept= ". IPA" name= "ipafile" required= "required"/> </div>
                            </div> </fieldset> <fieldset> <div class= "Form-group" > <label class= "col-sm-2 control-l
                                    Abel "> Upload icon </label> <div class=" Col-sm-6 "> <input type= "File" accept= ". png" Name= "AppIcon" required= "required"/> </div&gt
                            ;
                    </div> </fieldset> <fieldset>        <div class= "Row" > <label class= "col-sm-2 control-label" > Upload photos </label
                                    > <div style= "margin-left:300px;margin-top:20px" > Demo Picture 1 <input type= "file" accept= ". png" Name= "appshow" required= "required"/&gt ;<br/> </div> <div style= "margin-left:300px ; margin-top:20px "> Demo picture 2 <input type=" file "
                                accept= ". png" Name= "appshow" required= "required"/><br/> </div>
                                    <div style= "margin-left:300px;margin-top:20px" > Demo Pictures 3
                           <input type= "File" accept= ". png" Name= "appshow" required= "required"/><br/>     </div> <div style= "margin-left:300px;margin-top:20px" > Demo Picture 4 <input type= "file" accept= ". png" Name= "Appshow" required= "
                        Required "/><br/> </div> </div> </fieldset> </div> <div class= "Panel-footer text-cent Er "> <button type=" button "class=" btn btn-info "ng-click=" SaveReport () "Ng-disabled=" MyForm  . $invalid "> Confirmation </button> </div> </div> <!--end Panel--> </form>

2.springmvc back end

Multipartresolver get files based on file name resolution

@RequestMapping (value= "/upload", Method=requestmethod.post) @ResponseBody public map<string, object> upload ( HttpServletRequest request,httpservletresponse response) {map<string, object> resmap = new hashmap<string, OBJ
Ect> ();
		Gets the AppID int id = integer.parseint (request.getparameter ("id"));
		Resmap.put ("id", id);
		String Rootpath=uploadfilecontroller.class.getresource ("/"). GetFile ();
		RootPath = rootpath.substring (1, Rootpath.length ()-8);
		String apkpath=rootpath+ "file" + "/apk/";
		String ipapath=rootpath+ "file" + "/ipa/";
		String appiconpath=rootpath+ "img" + "/appicon" + "/";
		String appshowpath=rootpath+ "img" + "/appshow" + "/" +id+ "/"; try {//Create a generic multi-part parser commonsmultipartresolver multipartresolver = new Commonsmultipartresolver (Request.getsession ()
		. Getservletcontext ());
		To determine whether the request has file upload, that is, System.out.println ("1");
			if (Multipartresolver.ismultipart (Request)) {System.out.println ("2"); Convert to multi-part Request Multiparthttpservletrequest MultiRequest = (multiparthttpservletrequest) request;
			Multipartfile apkfile=multirequest.getfile ("Apkfile");
			Multipartfile ipafile=multirequest.getfile ("Ipafile");
			Multipartfile appiconfile=multirequest.getfile ("AppIcon");

			List<multipartfile> appshowfiles=multirequest.getfiles ("Appshow");
			Uploadmultipartfile.saveonefile (Apkfile, Apkpath, id);
			Uploadmultipartfile.saveonefile (Ipafile, Ipapath, id);
			Uploadmultipartfile.saveonefile (Appiconfile, Appiconpath, id);

			Uploadmultipartfile.savelistfile (Appshowfiles, Appshowpath, id);
			 Map<string, string> checkmap=fileservice.checkfile (ID);
				 For (Object O:checkmap.keyset ()) {System.out.println ("key=" + O + "value=" + checkmap.get (o));
					if (Checkmap.get (o). Equals ("false")) {resmap.put ("result", "error");
				Break
				}else {resmap.put ("result", "success");
		}}else {resmap.put ("result", "error");
			The catch (Exception e) {resmap.put ("result", "error"); Return rEsMap;
	return resmap; }

3.UploadMultipartFile save Multipartfile as a local file

Package com.baosight.webapp.util;
Import Java.io.File;
Import java.io.IOException;

Import java.util.List;

Import Org.springframework.web.multipart.MultipartFile;

Import Com.baosight.webapp.web.UploadFileController; public class Uploadmultipartfile {public static void Saveonefile (Multipartfile file,string path,int id) {try {Sys
		Tem.out.println ("Empty");
			if (!file.isempty ()) {System.out.println ("not Empty");
			System.out.println ("File:" +file.getoriginalfilename ());
			String Originalnamearr[]=file.getoriginalfilename (). Split ("[.]"); String fileName = id+ "."
			+ORIGINALNAMEARR[ORIGINALNAMEARR.LENGTH-1];
			Path=path+filename;
			System.out.println ("Path:" +path);
			File LocalFile = new file (path); try {if (!localfile.getparentfile (). exists ()) {//If the directory in which the destination file is located does not exist, create the parent directory Localfile.getparentfile (). Mkdirs ()
					 ;
				 System.out.println ("Parent:" +localfile.getparentfile (). GetPath ());
			} file.transferto (LocalFile); catch (Exception e) {//TODOAuto-generated Catch block E.printstacktrace ();
			A catch (Exception e) {System.out.println ("Exce[tion2");
		System.out.println (E.getmessage ());
		} public static void Savelistfile (list<multipartfile> files,string path,int id) {try {String path2= ' ";
			if (Files!=null&&files.size () >0) {int j=0;
				 for (Multipartfile multipartfile:files) {if (!multipartfile.isempty ()) {j + +;
				 String Originalnamearr[]=multipartfile.getoriginalfilename (). Split ("[.]"); path2=path+j+ "."
				 +ORIGINALNAMEARR[ORIGINALNAMEARR.LENGTH-1];
				 File LocalFile = new file (path2);
					 if (!localfile.getparentfile (). exists ()) {//If the directory in which the destination file is located does not exist, create the parent directory Localfile.getparentfile (). Mkdirs ();
				 System.out.println ("Parent:" +localfile.getparentfile (). GetPath ());
			try {Multipartfile.transferto (localfile);
			catch (Exception e) {//TODO auto-generated catch block E.printstacktrace (); catch (Exception E) {System.out.println ("Exception1"); Todo:handle Exception}}}

4. Prevent form submission after the Jump action

Introduction of Jquery.js and Jquery-form.js files

This article here based on ANGULARJS+HTML5 development, there are angularjs multiple file upload problems, use form form to upload files, in order to have callback information using Jquery-form.js block form jump

Button-triggered event: ng-click= "SaveReport ()"

$scope. Savereport=function SaveReport () {
        $scope. showfile=false;
        $scope. showprogress=true;
        jquery Form Submit
        $ ("#fileForm"). Ajaxsubmit (function (message) {
            console.log (message);

            if (message.result== "Success") {
                alert ("Upload succeeded");

                $state. Go ("Dash", null,{reload:true})
            else{
                alert ("Upload failed, please upload in update");
                $state. Go ("dash");
            }
           
        );

        return false; Must return FALSE to block page jump
    }