PHP Server File Manager Development Summary (vii): Apply jQueryUI preview Server picture

The previous section discusses the user-friendly interface for creating, viewing, and editing files using jQueryUI. However, these interfaces are for plain text, and if it is an image, it is not friendly to view the file with only plain text. Therefore, you need to provide an image-browsing method for the front end.

First, provide the front-end JavaScript code, the first is "raw materials":

<div id= "Dialogimage" style= "Display:none" ></div>

Then add the following in the Onelemact:

Case "image": $ (' #imgView '). attr (' src ', strviewpath); $ (' #dialogImage '). Dialog ({height: ' auto ', Width: ' Auto ', Position:{my: ' Center ', at: ' Center ', collision: ' Fit '},modal:false,draggable:true,resizable:true,title: ' View Image ' , Show: ' Slide ', hide: ' explode '});

It's simple, just fill the path of the picture into the control.

Then, in the server-side getfileeleminfo, determine whether an image file is based on the suffix name of the file:

 $fileExt  = strtolower (end (Explode (".",  $elemName));      $listImgExt  = array ("BMP",  "png",  "JPG",  "JPEG",  "gif",  " Ico ");    if  (In_array ($fileExt,  $listImgExt))     {          $viewMode  =  "image";    }     else     {         $viewMode =   "Content";    }     $encodedFilePath  = urlencode ($ FilePath);    if  (is_readable ($filePath))   $info .=  "<li><a  Href=\ "#\"  title=\ "view\"  onclick=\ "onelemact (' $viewMode ', ' $encodedFilePath ') \" ></a></li> "; 

Looks beautiful, seems to have everything OK, but the actual use, click Out is the wrong icon ...

Viewing the source code on the Web page will find that the IMG is populated with the path to the image file on the server. However, a relative path should be used for remote image browsing, so conversions from an absolute path to a relative path are required.

First, you need to get the local path name on the server:

$_session["Index"]=__FILE__;

The session is used because there may be differences between the displayed page and the PHP path that gets the path to the image.

The path analysis method is used to obtain the relative path:

Function getrelativepath ($currPath,  $targetPath) {     $targetFile  =  BaseName ($targetPath);     $listCurr  = explode ("/",  $currPath);     array_pop ($listCurr);     $listTarget  = explode ("/",  $targetPath );     array_pop ($listTarget);     $countCurr  = count ($ Listcurr);     $countTarget  = count ($listTarget);     $i = 0;     while  ($i < $countCurr  &&  $i < $countTarget)      {        if  ($listCurr [$i] !=  $listTarget [$ I])  break;        ++ $i;    }      $relPath  = ;    for  ($j  =  $i;  $j  <   $countCurr,  ++ $j)   $relPath.= ". /";    for  ($j = $i;  $j < $countTarget;  ++ $j)   $relPath. = $listTarget [$j] ." /";     $relPath. = $targetFile;    return  $relPath;}

The basic idea is to find the first fork in the two path, and then fill in the current path with enough ". /", then prefix the fork portion of the target path.

Finally, modify the code of the file attribute enumeration section:

     $fileExt  = strtolower (End (Explode (".",  $elemName));      $LISTIMGEXT  = array ("BMP",  "png",  "JPG",  "JPEG",  "gif",  "ico");     if  (In_array ($fileExt,  $listImgExt))     {          $viewMode  =  "image";         $ Encodedfilepath = getrelativepath ($_session["index"],  $filePath);     }     else     {        $ viewmode=  "Content";         $encodedFilePath  =  UrlEncode ($filePath);    }     $info .=  "<td><ul  Class=\ "operations\" > ";        if  (is_readable ($filePath))   $info .=  "<li><a&nbSp;href=\ "#\"  title=\ "view\"  onclick=\ "onelemact (' $viewMode ', ' $encodedFilePath ') \" ></a></li> ";

Specific effects such as:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/59/CB/wKioL1TlNoujZrFcAAZAy4uH1eY594.jpg "title=" PHP File Manager 11.png "alt=" Wkiol1tlnoujzrfcaazay4uh1ey594.jpg "/>

This article is from the "Accplayer Small Place" blog, make sure to keep this source http://accplaystation.blog.51cto.com/9917407/1614853

PHP Server File Manager Development Summary (vii): Apply jQueryUI preview Server picture