Home / Questions / 201928
Accepted
Jheyman Mejia
Asked: 2020-10-05 06:33:31 +0800 CST 2020-10-05 06:33:31 +0800 CST

<a> 中的下载属性下载文件，也是我的页面

  • 772

我的页面“downloads.php”中有以下行：

<a href="#" onclick="location.replace('uploads/ejemplo.pdf');" download>

对于隐私问题，我使用 onclick 以使用户看不到托管文件的原始链接，而是立即下载它（我知道这不是最好的安全方法）。

问题是当我点击时，不仅下载了文件“example.pdf”，而且还下载了我的页面“downloads.php”作为文件

有没有办法避免这种情况？您是否推荐另一种隐藏文件路径的方法？

编辑

我正在使用downloadChrome 显示而不是下载的 pdf 文件的属性，感谢您澄清如果我删除此属性，我会通过在开头评论来消除错误

php

2 Answers

  1. Best Answer

    我将基于任何场景，最接近您建议的内容是，例如，提供下载的文件列表，并且根据您的说法，您希望隐藏这些文件所在的 URL。

    我们将以链接的形式放置该列表，我们将听取每个点击的点击，我们将从客户端向服务器发起请求，以便直接完成下载，这是您所需要的。

    我们将从客户端XMLHttpRequest向服务器发起一个请求，将文件的位置发送给它。我们将指出该类型的响应是预期的blob，并且我们将能够从响应中下载文件。

    很重要：

    每个文件的名称和位置信息都可以在data-*each 的属性中找到li，如 HTML 源代码中所示。

    这里我们假设您的服务器上存在以下文件：

     uploads
     pdf
       android.pdf
       js.pdf
       php.pdf

    doc
       swift.doc

    txt
       cobol.txt

    该文件（如果存在）将被下载到客户的计算机上，而不会在任何时候显示资源链接。

    控制请求的响应很方便XMLHttpRequest，例如在文件不存在的情况下，对代码进行适当的处​​理。

    出于简洁的原因，我没有这样做。

    该代码已经在真实环境中进行了测试，并且可以正常工作。

    我希望它对你有帮助。

    JavaScript：

    document.addEventListener("DOMContentLoaded", function(event) {
  /*Referencias a los elementos*/
  var liFiles = document.querySelectorAll('.list-files li');
  var divInfo = document.getElementById("info");

  /*Agregamos listener a todos los <li>*/
  liFiles.forEach(function(elem) {
    elem.addEventListener('click', downloadFile, false);
  });

  /*
     *Esta es la función que se ejecutará cada vez que
     *se haga click en alguno de los <li>
  */
  function downloadFile() {
    /*
       *Obtenemos el directorio, el nombre
       *y construimos una ruta completa
    */
    var fileDir = this.dataset.dir;
    var fileName = this.dataset.name;
    var filePath = `${fileDir}/${fileName}`;

    /*Vamos a hacer una petición al servidor buscando el archivo*/
    var req = new XMLHttpRequest();
        req.open("GET", filePath, true);
        req.responseType = "blob";
        req.onload = function(event) {
            var blob = req.response;
            /*
              *Aquí hacemos que el archivo se descargue
              *sin ninguna acción
            */
            var link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = fileName;
                link.click();
        };

        req.send();

    /*Imprimimos un mensaje*/
    divInfo.textContent = "Archivo descargado... Conviene validar la respuesta y manejar posibles errores.";
  }

});

    HTML：

    <h2>Archivos disponibles</h2>
<hr />
<ul class="list-files">
  <li data-dir="uploads/pdf" data-name="android.pdf"><a id="ff" href="#">Android</a></li>
  <li data-dir="uploads/doc" data-name="swift.doc"><a href="#">Swift</a></li>
  <li data-dir="uploads/pdf" data-name="js.pdf"><a href="#">Javascript</a></li>
  <li data-dir="uploads/pdf" data-name="php.pdf"><a href="#">PHP</a></li>
  <li data-dir="uploads/txt" data-name="cobol.txt"><a href="#">Cobol</a></li>
</ul>
<div id="info"></div>
    • 6

  2. 这是因为您放置了下载属性。脱掉

    • 2