使用jquery使用Ajax读取文件夹的内容

Question

我需要将目录和子目录中的文件进行原子化，然后将它们显示为可折叠/ Accordion集合

Answer 1

    to do this we need to read the files in this case we need to add the main and sub folders to our project then use something like the following snippet to get that done. 

    $(document).ready(function ()
         {
                // specify the base directory you want to search and type 
                //of 
                // files you are searching
                var dir = "yourfolder/";
                var fileextension = [".pdf", ".doc", ".docx"];
                var textul = "";
                var x;
                $.ajax({
                    //This will retrieve the contents of the folder if 
                    //the 
                    //folder is configured as 'browsable'
                    url: dir,
                    type: 'Get',
                    async: false,
                    cache: false,
                    success: function (data) {
                        //Lsit all file names in the page

                        if (data.indexOf(dir)>-1)
                        {
                            //since we getting the files as links in the 
                            //result we will get the names by splitting 
                            //the result to an array
                            var direc = data.split("</A>");

                            //we can add the structure of the unordered 
                            //list
                            textul = "<ul  class='ShiftLeft container' 
                                       style='list-style-type:none'>";

                            // we then loop through the array to get the 
                            //directory name
                            direc.forEach(function (index, value) {
                                if (value > 0) {
                                var dirname = 

                                 index.substr(index.indexOf('\">'), 

                                 index.indexOf('"')).replace('>', 
                                           '').replace('"', 
                                           '').replace('\\', 
                                           '');

                                if (dirname != "") {
                                    textul += "<li> <div  
                                    class='NavyHeader 
                                              header1' > <img alt='' 

                                      src='images/general/BlueBullet.gif' 
                                               />" + dirname + " </div> 
                                                <div 
                                               class='content ' 
                                               style='display:none;'> 
                                                <ul>";

                                    //dirs.push(dirname);
                                    $.ajax({
                                        //now we will loop through the 
                                        //folders to get all the files in 
                                        //them that match the extensions 
                                        //we provided
                                        url: dir+'/'+dirname,
                                        type: 'Get',
                                        async: false,
                                        cache: false,
                                        success: function (data) {
                                            $(data).find('a:contains(' + 
                                             fileextension[0] + 
                                             '),a:contains(' + 
                                             fileextension[1] + 
                                             '),a:contains(' + 
                                             fileextension[2] + 
                                              ')').each(function (index, 
                                                value) {
                                                var filename = 

                                  this.href.replace(window.location.host, 
                                      "").replace("http:///", "");
                                      textul+="<li><a href=" + filename + 
                                              ">"+filename+" </a></li>";

                                            });

                                        }

                                    });
                                    textul += " </ul></div></li>";


                                }

                                }

                            });
                              //now we can add the unordered list text to 
                              //our 
                              //div that will contain the list
                              $("#ResourcesDiv").append($(textul+" 
                               </ul>")); 
                        }

                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(xhr.status);
                        alert(thrownError);
                    }
                });
          }

// to do the collapsible effect we can add the following snippet to 
//document ready method
// we need to add the header1 class to the div we want to collapse 

    $("div").on("click","div.header1", function(e){
     // another jquery function to do this with could be  
       $(".cotent").collapse('toggle');
       $header = $(this);
       //getting the next element
       $content = $header.next();
       // without the stopPropagation() the click event will fire many 
       //times
       e.stopPropagation();
       //open up the content needed - toggle the slide- if visible, slide 
       //up, 
       //if not slidedown.

       $content.slideToggle(500, function () {
         //execute this after slideToggle is done
         //change text of header based on visibility of content div


         });
     });

//css
 .header1{
          /* your style here */
      }

//I hope this helps :)