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

时间:2016-01-19 07:19:31

标签: javascript html html5 download

我正在使用来自以下代码的HTML5下载文件,您可以在JSBIN HTML5 Download File DEMO查看其实时操作,并且其工作正常,并在我的浏览器默认下载文件夹下载我的文件。

<!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>

但我想在不同的位置下载它。就像我离线使用这个代码一样,我的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);

1 个答案:

答案 0 :(得分:11)

它不可能,因为这会带来安全风险。人们对其文件夹结构使用相当真实的信息,并且访问文件夹名称本身就构成了直接风险。如下所述:

Get browser download path with javascript

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