PHP Server File Manager Development Summary (vi): Use jQueryUI to create new, view, and edit files

The actions in the previous sections are read to the server content, and the following are some of the things that are involved in modifying the server.

The first is to create a new file under the current folder, which corresponds to the new menu item on the top of the folder.

<li><a href= "#" title= "New File" onclick= "Onnewfile ()" ></a></li>

Its response to the Onnewfile function, if in the C/S program, you can pop up a dialog box that allows the user to enter the file name of the new file, and then send the request to the server side. However, how to implement this dialog box in the B/s program? Fortunately there are jqueryui.

By introducing the following code into the jQueryUI of the online CDN or after saving it to the server, the method of this article can save the resources of the server.

<link rel= "stylesheet" href= "Http://cdn.bootcss.com/jqueryui/1.11.2/jquery-ui.min.css" ><link rel= " Stylesheet "href=" Http://cdn.bootcss.com/jqueryui/1.11.2/jquery-ui.theme.min.css "><script type=" text/ JavaScript "src=" Http://cdn.bootcss.com/jqueryui/1.11.2/jquery-ui.min.js "></script>

jQueryUI can be called by simply calling the. dialog function to implement the popup dialog box. Specifically to the response Onnewfile function:

function Onnewfile () {$ (' #dialogNewFile '). Dialog ({height: ' auto ', Width: ' Auto ', position:{my: ' Center ', at: ' Center ', Collision: ' Fit '},modal:false,draggable:true,resizable:true,title: ' New File ', Show: ' Slide ', hide: ' Explode ', buttons : {ok:function () {strnewfilename = $ (' #textNewFileName '). Val (); if (Strnewfilename = = "") Return;$.post ("query.php", {        Act: "NewFile", File:strnewfilename}, function (data) {$ (' #spanDirTable '). HTML (data);    $ (' #dialogNewFile '). Dialog ("Close");        });},cancel:function () {$ (this). dialog ("Close"); }}});}

Note that there are a number of parameters behind dialog, which are not explained in detail, and interested readers can go to the relevant official introduction.

At the same time, two buttons are provided in the dialog, and the processing flow triggered by the click is bound, the most important thing is the processing of the OK button:

Ok:function () {strnewfilename = $ (' #textNewFileName '). Val (); if (strnewfilename = = ") return;$.post (" query.php ", {act:        "NewFile", File:strnewfilename}, function (data) {$ (' #spanDirTable '). HTML (data);    $ (' #dialogNewFile '). Dialog ("Close"); });}

It removes the name of the new file from the input box Textnewfilename and sends the request to query.php. After receiving the information, populate the page content and close the dialog box.

Of course, only this function does not implement the dialog box function, also need to add "raw material" in the webpage:

<div id= "Dialognewfile" style= "Display:none" ><strong>create File under Folder:<br/></strong >please input File name:<input type= "text" id= "Textnewfilename"/></div>

Click the effect as follows:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/59/CA/wKiom1ThoX_x0OObAAEn6xSLLWg070.jpg "title=" PHP File Manager 6.png "alt=" Wkiom1thox_x0oobaaen6xsllwg070.jpg "/>

After the server receives the command, it attempts to create a new file and returns a prompt to the user via alert.

PHP, through fileexists to determine whether a file exists, through fopen can create new or open files.

        case  "NewFile":                  $isDirContentView  = true;                 if  (Isset ($_session[" Currdir "]))                   {                      $strDirName  = $_session["Currdir"];                 }                 else   $strDirName  =  "Home";                 if  (isset ($_post["file"])                 {                      $strFileName  = $_post[ "File"];                      $strFilePath  =  $strDirName. " /". $strFileName;                      $fileNew  = fopen ($strFilePath,  "W");                     if  ($ Filenew === false)                      {                         echo&nbSP; " <script>alert (' create new file \ ' $strFilePath \ " failed! ') </script> ";                     }                     else                      {                         fclose ($ FileNew);                         echo  "<script>alert (' Create new file  \ "$strFilePath \"  succeed! ") </script> ";                     }                 }                break;

Note that $isdircontentview = True here will cause the action mentioned earlier to get the list of folder contents to be triggered.

Implementation results:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/59/C6/wKioL1Tho66wTuAwAAJNv0kMmIY157.jpg "title=" PHP File Manager 7.png "alt=" Wkiol1tho66wtuawaajnv0kmmiy157.jpg "/> Click on the Alert button, dialog will also be turned off.

A new folder can also be resolved in a similar way.

Photo Link:

<li><a href= "#" title= "new Folder" onclick= "Onnewfolder ()" ></a></li>

"Raw materials":

<div id= "Dialognewfolder" style= "Display:none" ><strong>create sub-folder Under Folder:<br/></ Strong>please input Folder name:<input type= "text" id= "Textnewfoldername"/></div>

Onnewfolder function:

function Onnewfolder () {$ (' #dialogNewFolder '). Dialog ({height: ' auto ', Width: ' Auto ', position:{my: ' Center ', at: ' Center ', collision: ' Fit '},modal:false,draggable:true,resizable:true,title: ' New File ', Show: ' Slide ', hide: ' Explode ' , Buttons:{ok:function () {strnewfoldername = $ (' #textNewFolderName '). Val (); if (Strnewfoldername = = "") Return;$.post ("        query.php ", {act:" NewFolder ", File:strnewfoldername}, function (data) {$ (' #spanDirTable '). HTML (data);    $ (' #dialogNewFolder '). Dialog ("Close");        });},cancel:function () {$ (this). dialog ("Close"); }}});}

PHP to create a folder with mkdir, corresponding response:

        case  "NewFolder":                  $isDirContentView  = true;                 if  (Isset ($_session[" Currdir "]))                   {                      $strDirName  = $_session["Currdir"];                 }                 else   $strDirName  =  "Home";                 if  (isset ($_post["file"])                 {                      $strSubDirName  = $_ post["File"];                      $strSubDirPath  =  $strDirName. " /". $strSubDirName;                     if  (mkdir ($strSubDirPath)  === false)                      {                          echo  "<script>alert (' create new folder \" $strSubDirPath \ "  failed! ') </script> ";                    }                     else                       {                         echo  "<script>alert (' create new folder \" $ Strsubdirpath\ " succeed!") </script> ";                     }                 }                 break;

Implementation results:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/59/CA/wKiom1ThpCyhUROkAAKSDx0MSCA901.jpg "title=" PHP File Manager 8.png "alt=" Wkiom1thpcyhurokaaksdx0msca901.jpg "/>

Viewing a file as part of a file operation requires a file to be readable. The following code snippet adds a view icon to the action bar:

$viewMode = "Content"; $encodedFilePath = UrlEncode ($filePath); $info. = "<td><ul class=\" operations\ ">"; if (is_readable ($filePath)) $info. = "<li><a href=\" #\ "title=\" view\ "onclick=\" onelemact (' $viewMode ', ' $ Encodedfilepath ') \ "></a></li>";

Note that the actual Response button event is onelemact (' content ', ' UrlEncode ($filePath) ').

Here through the onelemact, in the client JS to the folder under the operation of the project unified.

The following is a response to viewing content:

function Onelemact (Strviewmode, Strviewpath) {switch (strviewmode) {case "content": $.post ("query.php", {act: "Content" , File:strviewpath}, function (data) {$ (' #textContent '). Text ("" +data); $ (' #dialogContent '). Dialog ({height: ' auto ', Width: ' Auto ', position:{my: ' Center ', at: ' Center ', collision: ' Fit '},modal:false,draggable:true,resizable:true, Title: ' View Content ', Show: ' Slide ', hide: ' explode '}); Break

Unlike the new file, the post requests the file contents first, then fills the file contents into the Textcontent area, and then displays the dialogcontent to pop up the dialog box. The corresponding "raw materials" are:

<div id= "dialogcontent" style= "Display:none" ><textarea class= "Text-dialog" id= "TextContent" ></ Textarea></div>

The server can obtain the contents of the file through File_get_content. The JS terminal here uses text instead of HTML to load content effectively avoiding the HTML markup that triggers the server file.

            case  "Content":                  $isDirContentView  =  false;                if  (Isset ($_post["file"])                  {                      $strFileName  = urldecode ($_post["file"]);                     echo file_get_ Contents ($strFileName);                 }                 Break

Here $isdircontentview = false; You can avoid refreshing the contents of the folder because you do not need to return the content.

Specific effects:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/59/CA/wKiom1Thp6ex3ZjQAAL4SHxHGuU562.jpg "title=" PHP File Manager 9.png "alt=" Wkiom1thp6ex3zjqaal4shxhguu562.jpg "/>

Editing a document involves creating a new document and viewing the technology in the document: first requesting the content of the document, sending the edited content to the server with a button event after editing, and returning the result of the modification.

The first is the button icon, followed by the View button, note that the editable file must be writable:

if (is_writable ($filePath)) $info. = "<li><a href=\" #\ "title=\" edit\ "onclick=\" onelemact (' edit ', ' $ Encodedfilepath ') \ "></a></li>";

In Onelemact, respond to the event:

            case  "edit": $.post ("query.php",  {act: "Content", file:strviewpath}, function  (data) {$ (' #textEdit '). Text ("" +data); $ (' # Dialogedit '). Dialog ({height: ' auto ', Width: ' Auto ', position:{my: ' Center ', at: ' Center ', collision: ' Fit '},modal:false , Draggable:true,resizable:true,title: ' Edit content ', Show: ' Slide ', hide: ' Explode ',buttons:{ok:  function ()  {streditcontent = $ (' #textEdit '). Val (); $.post ("query.php",  {act: "Editfile",  file:strViewPath, content:strEditContent}, function  (data)  {         $ (' #spanDirTable '). HTML (data);         $ (  ' #dialogEdit '  ). Dialog (  "close"  );     });},cancel: function ()  {         $ ( this ). Dialog (  "close"  );        &n(BSP;}});}); Break

The corresponding raw materials:

<div id= "Dialogedit" style= "Display:none" ><textarea class= "Text-dialog" id= "TextEdit" ></textarea ></div>

In the server, get the content through file_get_content and modify the content through File_put_content:

case  "Editfile":                  $isDirContentView  = true;                 if  (Isset ($_session["Currdir"))                   {                      $strDirName  = $_ session["Currdir"];                 }                else    $strDirName  =  "Home";                 if  (isset ($_post["file"])  && isset ($_post["content"])                 {                      $strFilePath  =  UrlDecode ($_post["file"]);                     if  (File_put_contents ($strFilePath,  $_post["content"))                       {                         echo  "<script>alert (' file \" $strFilePath \ " edit  succeed! ') </script> ";                     }                     else                      {                                                   echo  "<script>alert (' file \" $strFilePath \ " edit failed!") </script> ";                     }                 }                 break;

Implementation results:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/59/C6/wKioL1ThqqfSFqpEAAKw-za8L7M299.jpg "title=" PHP File Manager 10.png "alt=" Wkiol1thqqfsfqpeaakw-za8l7m299.jpg "/>

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

PHP Server File Manager Development Summary (vi): Use jQueryUI to create new, view, and edit files