强制下载动态加载文件

时间：2016-03-19 01:39:28

标签： html css html5

好的，所以我希望强制下载以下代码显示的项目。我发现here我可以为文件设置“下载”属性，但我需要为索引文件中的每个项目执行此操作。

此外，有没有办法强制下载文件夹但将其保存为.zip，或者我是否必须创建一个包含所有内容的个人.zip文件并上传？

如果有人知道如何将索引文件从表格更改为网格显示，那就太棒了！

HTML：              

        <div class="form-gap"></div>

        <h1>Eliza &amp; Daniel's Wedding</h1>

        <div class="form-gap"></div>

      <div id="container">


    <table class="sortable border-radius-table">
      <thead>
        <tr>
          <th>Filename</th>
          <th>Type</th>
          <th>Size <small>(bytes)</small></th>
          <th>Date Modified</th>
        </tr>
      </thead>
      <tbody>
      <?php
        // Opens directory
        $myDirectory=opendir(".");

        // Gets each entry
        while($entryName=readdir($myDirectory)) {
          $dirArray[]=$entryName;
        }

        // Finds extensions of files
        function findexts ($filename) {
          $filename=strtolower($filename);
          $exts=split("[/\\.]", $filename);
          $n=count($exts)-1;
          $exts=$exts[$n];
          return $exts;
        }

        // Closes directory
        closedir($myDirectory);

        // Counts elements in array
        $indexCount=count($dirArray);

        // Sorts files
        sort($dirArray);

        // Loops through the array of files
        for($index=0; $index < $indexCount; $index++) {

          // Allows ./?hidden to show hidden files
          if($_SERVER['QUERY_STRING']=="hidden")
          {$hide="";
          $ahref="./";
          $atext="Hide";}
          else
          {$hide=".";
          $ahref="./?hidden";
          $atext="Show";}
          if(substr("$dirArray[$index]", 0, 1) != $hide) {

          // Gets File Names
          $name=$dirArray[$index];
          $namehref=$dirArray[$index];

          // Gets Extensions 
          $extn=findexts($dirArray[$index]); 

          // Gets file size 
          $size=number_format(filesize($dirArray[$index]));

          // Gets Date Modified Data
          $modtime=date("M j Y g:i A", filemtime($dirArray[$index]));
          $timekey=date("YmdHis", filemtime($dirArray[$index]));

          // Prettifies File Types, add more to suit your needs.
          switch ($extn){
            case "png": $extn="PNG Image"; break;
            case "jpg": $extn="JPEG Image"; break;
            case "svg": $extn="SVG Image"; break;
            case "gif": $extn="GIF Image"; break;
            case "ico": $extn="Windows Icon"; break;

            case "txt": $extn="Text File"; break;
            case "log": $extn="Log File"; break;
            case "htm": $extn="HTML File"; break;
            case "php": $extn="PHP Script"; break;
            case "js": $extn="Javascript"; break;
            case "css": $extn="Stylesheet"; break;
            case "pdf": $extn="PDF Document"; break;

            case "zip": $extn="ZIP Archive"; break;
            case "bak": $extn="Backup File"; break;

            default: $extn=strtoupper($extn)." File"; break;
          }

          // Separates directories
          if(is_dir($dirArray[$index])) {
            $extn="&lt;Directory&gt;"; 
            $size="&lt;Directory&gt;"; 
            $class="dir";
          } else {
            $class="file";
          }

          // Cleans up . and .. directories 
          if($name=="."){$name=". (Current Directory)"; $extn="&lt;System Dir&gt;";}
          if($name==".."){$name=".. (Parent Directory)"; $extn="&lt;System Dir&gt;";}

          // Print 'em
          print("
          <tr class='$class'>
            <td><a href='./$namehref'>$name</a></td>
            <td><a href='./$namehref'>$extn</a></td>
            <td><a href='./$namehref'>$size</a></td>
            <td sorttable_customkey='$timekey'><a href='./$namehref'>$modtime</a></td>
          </tr>");
          }
        }
      ?>
      </tbody>
    </table>

  </div>

        <div class="form-gap"></div>

        <div class="form-gap"></div>

    </div>
</div>

CSS：

/* STYLESHEET FOR INDEX ITEMS */
#container {
    position: relative;
    background: transparent;
    padding-left: 30px;
    padding-right: 30px;
    font-family: nav-item;
}

table {
    background-color: transparent;
    border-collapse: collapse;
    width: 100%;
    margin: 15px 0;
}

th {
    background-color: rgba(0, 0, 0, 0.25);
    color: #FFF;
    cursor: pointer;
    padding: 5px 10px;
}

th small {
    font-size: 9px; 
}

td, th {
    text-align: left;
}

a {
    text-decoration: none;
}

td a {
    color: #fff;
    display: block;
    padding: 5px 10px;
    border-radius: 5px;
}
th a {
    padding-left: 0;
}

td:first-of-type a {
    background: url(http://www.djscimmia.com/TEST/_assets/file.png) no-repeat 10px 50%;
    padding-left: 35px;
}
th:first-of-type {
    padding-left: 35px;
}

td:not(:first-of-type) a {
    background-image: none !important;
} 

tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}

tr:hover td {
    background-color: rgba(0, 0, 0, 0.75);
}

tr:hover td a {
    color: #fff;
}

/* images */
table tr td:first-of-type a[href$=".jpg"], 
table tr td:first-of-type a[href$=".png"], 
table tr td:first-of-type a[href$=".gif"], 
table tr td:first-of-type a[href$=".svg"], 
table tr td:first-of-type a[href$=".jpeg"]
{background-image: url(http://www.djscimmia.com/TEST/_assets/image.png);}

/* zips */
table tr td:first-of-type a[href$=".zip"] 
{background-image: url(http://www.djscimmia.com/TEST/_assets/zip.png);}

/* css */
table tr td:first-of-type a[href$=".css"] 
{background-image: url(http://www.djscimmia.com/TEST/_assets/css.png);}

/* docs */
table tr td:first-of-type a[href$=".doc"],
table tr td:first-of-type a[href$=".docx"],
table tr td:first-of-type a[href$=".ppt"],
table tr td:first-of-type a[href$=".pptx"],
table tr td:first-of-type a[href$=".pps"],
table tr td:first-of-type a[href$=".ppsx"],
table tr td:first-of-type a[href$=".xls"],
table tr td:first-of-type a[href$=".xlsx"]
{background-image: url(http://www.djscimmia.com/TEST/_assets/office.png)}

/* videos */
table tr td:first-of-type a[href$=".avi"], 
table tr td:first-of-type a[href$=".wmv"], 
table tr td:first-of-type a[href$=".mp4"], 
table tr td:first-of-type a[href$=".mov"], 
table tr td:first-of-type a[href$=".m4a"]
{background-image: url(http://www.djscimmia.com/TEST/_assets/video.png);}

/* audio */
table tr td:first-of-type a[href$=".mp3"], 
table tr td:first-of-type a[href$=".ogg"], 
table tr td:first-of-type a[href$=".aac"], 
table tr td:first-of-type a[href$=".wma"] 
{background-image: url(http://www.djscimmia.com/TEST/_assets/audio.png);}

/* web pages */
table tr td:first-of-type a[href$=".html"],
table tr td:first-of-type a[href$=".htm"],
table tr td:first-of-type a[href$=".xml"]
{background-image: url(http://www.djscimmia.com/TEST/_assets/xml.png);}

table tr td:first-of-type a[href$=".php"] 
{background-image: url(http://www.djscimmia.com/TEST/_assets/php.png);}

table tr td:first-of-type a[href$=".js"] 
{background-image: url(http://www.djscimmia.com/TEST/_assets/script.png);}

/* directories */
table tr.dir td:first-of-type a
{background-image: url(http://www.djscimmia.com/TEST/_assets/folder.png);}

1 个答案:

答案 0 :(得分：0)

好的，所以最后我发现我可以简单地制作另一个“＆lt; tr＆gt;” item并将“download”属性添加到“＆lt; th＆gt;”的末尾脚本如下：

<table class="sortable border-radius-table">
      <thead>
        <tr>
          <th>Filename</th>
          <th>Type</th>
          <th>Size <small>(bytes)</small></th>
          <th>Date Modified</th>
          <th></th>
        </tr>
      </thead>
<tbody>

和

// Print 'em
          print("
          <tr class='$class'>
            <td><a href='./$namehref'>$name</a></td>
            <td><a href='./$namehref'>$extn</a></td>
            <td><a href='./$namehref'>$size</a></td>
            <td sorttable_customkey='$timekey'><a href='./$namehref'>$modtime</a></td>
            <td><a href='./$namehref' download='$name'>Download $name</a></td>
          </tr>");
相关问题
最新问题