Javascript 使用 HTML5 在不同位置下载文件

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/34870711/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 16:59:13  来源:igfitidea点击:

Download A File At Different Location Using HTML5

javascripthtmldownload

提问by Muhammad Hassan

I am downloading files using HTML5 from below codes that you can see live in action at JSBIN HTML5 Download File DEMOand its working perfectly file and downloading my files at my browser default Download Folder.

我正在从下面的代码中使用 HTML5 下载文件,您可以在JSBIN HTML5 下载文件演示中看到实时运行及其完美运行的文件,并在我的浏览器默认下载文件夹中下载我的文件。

<!DOCTYPE html>
<html>
</head>    
</head>
<body>
<table>
    <tr><td>Text To Save:</td></tr>
    <tr>
        <td colspan="3">
            <textarea id="inputTextToSave" style="width:512px;height:256px"></textarea>
        </td>
    </tr>
    <tr>
        <td>Filename To Save As:</td>
    <td><input id="inputFileNameToSaveAs"></td>
        <td><button onclick="saveTextAsFile()"> Save Text To File </button></td>
    </tr>
    <tr>
        <td>Select A File To Load:</td>
        <td><input type="file" id="fileToLoad"></td>
        <td><button onclick="loadFileAsText()">Load Selected File</button><td>
    </tr>
</table>
<script type='text/javascript'>
function saveTextAsFile()
{
    var textToWrite = document.getElementById("inputTextToSave").value;
    var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
    var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;

    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    if (window.webkitURL != null)
    {
        // Chrome allows the link to be clicked
        // without actually adding it to the DOM.
        downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
    }
    else
    {
        // Firefox requires the link to be added to the DOM
        // before it can be clicked.
        downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
        downloadLink.onclick = destroyClickedElement;
        downloadLink.style.display = "none";
        document.body.appendChild(downloadLink);
    }
    downloadLink.click();
}

function destroyClickedElement(event)
{
    document.body.removeChild(event.target);
}

function loadFileAsText()
{
    var fileToLoad = document.getElementById("fileToLoad").files[0];
    var fileReader = new FileReader();
    fileReader.onload = function(fileLoadedEvent) 
    {
        var textFromFileLoaded = fileLoadedEvent.target.result;
        document.getElementById("inputTextToSave").value = textFromFileLoaded;
    };
    fileReader.readAsText(fileToLoad, "UTF-8");
}
</script>
</body>
</html>

But I want to download it on different location. Like I am using this code offline and just have the upper code in my index.htmlfile. When I run this file in my browser from file:///C:/Users/Public/Desktop/then it download the file and save it at file:///C:/Users/Public/Downloads/. So I want to download this file from where its called. For this I am picking the path from the following code. and its giving me the path as /C:/Users/Public/Desktop/so I want to save file here. Whereever my this index.htmlfile will go, it will download the file and save it along index.htmlfile. How is this possible?

但我想在不同的位置下载它。就像我离线使用此代码一样,我的index.html文件中只有上层代码。当我在浏览器中运行此文件时,file:///C:/Users/Public/Desktop/它会下载该文件并将其保存在file:///C:/Users/Public/Downloads/. 所以我想从它调用的地方下载这个文件。为此,我从以下代码中选择路径。它给了我路径,/C:/Users/Public/Desktop/所以我想在这里保存文件。无论我的这个index.html文件去哪里,它都会下载文件并将其保存在index.html文件中。这怎么可能?

var url = window.location.pathname;
var folderpath = url.substring(0,url.lastIndexOf('/')+1);
alert(folderpath);

回答by Dandy

Its not possible because this poses a security risk. People use fairly real information for their folder structure and accessing the folder names in itself poses an immediate risk. As described here:

这是不可能的,因为这会带来安全风险。人们为他们的文件夹结构使用相当真实的信息,访问文件夹名称本身会带来直接的风险。如此处所述:

Get browser download path with javascript

使用javascript获取浏览器下载路径

Most OSs tend to just default to a Download location and this is something the user decides through the Browser they use. Not the website.

大多数操作系统往往只是默认为下载位置,这是用户通过他们使用的浏览器决定的。不是网站。