JAVA+JS implementation Show all pictures under the local folder demo

JAVA+JS implementation Show all pictures under the local folder demo

Recent project encounters need to implement front end through a button click event, popup Browse all pictures under local folder :
思路:
- Get the file absolute path name (path + picture name) of all the pictures in the local folder where you want to show the pictures. Format name)
- proportional compression and display of images due to large picture
- show pictures on the front
-(front-end variety of displays ... ）

First step: Get all the picture paths in the local folder

Java code:

     PackageCom.giscafer.common;ImportJava.io.File;ImportJava.io.IOException;ImportJava.net.MalformedURLException;ImportJava.util.ArrayList;ImportJavax.servlet.ServletException;ImportJavax.servlet.http.HttpServletRequest;ImportJavax.servlet.http.HttpServletResponse;ImportOrg.springframework.stereotype.Controller;Importorg.springframework.web.bind.annotation.RequestMapping;ImportOrg.springframework.web.bind.annotation.ResponseBody;/** * File Preview helper class * @author LHB * */@Controller Public  class filebrowseutil {    /** * Get the file FileList array inside the incoming file path via AJAX request * @param req * @param resp * @param  Params folder Path parameter * @return * @throws servletexception * @throws IOException *  @throws malformedurlexception * *    @RequestMapping("/getfilelist.do")@ResponseBody    protectedArraylist<string>Calculategeoservlet(HttpServletRequest req, httpservletresponse resp,string params)throwsServletexception, IOException, malformedurlexception {arraylist<string> filelist=NewArraylist<string> (); Filelist=getfiles (params);returnFileList; }/** * Recursively get all directories and their files under a path * @param filePath file path * * @return * *     Public StaticArraylist<string>GetFiles(String FilePath) {Arraylist<string> fileList =NewArraylist<string> (); File root =NewFile (FilePath); file[] files = root.listfiles (); for(File file:files) {if(File.isdirectory ()) {/ * * Recursive call * /GetFiles (File.getabsolutepath ());            Filelist.add (File.getabsolutepath ()); }Else{String picpathstr = File.getabsolutepath ();//String picpathstr = File.getabsolutepath (). ReplaceAll ("\\\\", "//");Filelist.add (PICPATHSTR); }        }/*for (String str:filelist) {System.out.println (str); }*/        returnFileList; }}

Test output results can be called first

String FilePath = "c://users//giscafer//pictures//white";
GetFiles (FilePath)

Step two front end Ajax call request get image Path array

/** * Get an array of picture files */ function common_getpicfilelist() {    varparams ="c://users//giscafer//pictures//White"; $.ajax ({//Use your own packaged Java class hereURL:CONFIG.HOSTURL +"/getfilelist.do", type:"POST", data: {params:params},//Picture folder path passed as a parameter to the Java classSuccess function (data) {            if(!data.length) {Alert ("You haven't yet, can't see the picture!" ");return; }Else{//Get to the image array processing logic methodLoadpicformdb (data); }}, Error: function (e) {Console.log (e); Console.log ("Get file list array failed, please check interface service"); }    });}

End the above two steps to complete the way to browse local images. The rest is the loadPicFormDB(data); method, this according to you need to show, online there are many album types of ready-made code, directly to get rid of the image address can be;

The following is my

/** * Load picture, spell image into HTML code * @param sj_code Event Number */function Loadpicformdb (data) {varpichtml =""; for(vari =0; i < data.length; i++) {varSRC =data[i];varHTML1 =' <li><a href= ' file:///'+ src +' "rel=" Lightbox "title= "+ Data[i] +' "target=" _blank ">"+' + src +' ></a><span> '+ Data[i] +' </span></li> '; pichtml + = HTML1;//scrollpic ();}    ; Showpicdetail (pichtml);//Show pictures (this code is omitted, directly to a div or pop-up window can be)}

The Autoresizeimage method used above is a picture compression method, the compression principle:
1. Compress the image by the size of the incoming maxwidth and maxheight

/** * Proportionally reduced image * @param maxWidth * @param maxheight * @param objimg * @constructor */function Autoresizeimage (maxWidth, MaxHeight, objimg) {varIMG =NewImage (); IMG.SRC = OBJIMG.SRC;varHratio;varWratio;varRatio =1;varW = img.width;varh = img.height;    Wratio = maxwidth/w; Hratio = maxheight/h;if(MaxWidth = =0&& MaxHeight = =0) {Ratio =1; }Else if(MaxWidth = =0) {//        if(Hratio <1) Ratio = Hratio; }Else if(MaxHeight = =0) {if(Wratio <1) Ratio = Wratio; }Else if(Wratio <1|| Hratio <1{Ratio = (wratio <= hratio? wratio:hratio); }if(Ratio <1) {w = w * Ratio;    H = h * Ratio;    } objimg.height = h; Objimg.width = w;}

Effect:

-–the end-–

JAVA+JS implementation Show all pictures under the local folder demo