使用HTML5下载不同位置的文件 [英] Download A File At Different Location Using HTML5

查看:134
本文介绍了使用HTML5下载不同位置的文件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在从以下代码下载HTML5文件,您可以在 JSBIN HTML5下载文件DEMO ,其工作完美的文件,并在浏览器默认下载我的文件下载文件夹

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

<!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 / 中运行此文件时,它会下载该文件并将其保存在文件:/// C:/用户/公共/下载/ 。所以我想从其所在的地方下载这个文件。为此,我从以下代码中选择路径。并且它给我的路径为 / C:/ Users / Public / Desktop / 所以我想保存文件在这里。 Whereever我的这个 index.html 文件将会去,它将下载文件并沿着 index.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.html file. 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.html file will go, it will download the file and save it along index.html file. How is this possible?

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


推荐答案

不可能,因为这带来安全隐患。人们对其文件夹结构使用相当真实的信息,并且本身访问文件夹名称将立即产生风险。如下所述:

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:

使用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.

这篇关于使用HTML5下载不同位置的文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆