如何在下载文件之前使用 Jquery 重命名文件?

问题描述 投票:0回答:1

我有一个 html-jquery 脚本来下载很多文件。 这些文件是通过调用所有这些 url 上的 onClick 事件来下载的。它们会自动保存在下载文件夹中。但我想在将文件保存到下载文件夹之前重命名它们。

我的意思是:如果一个文件名为“myfile.pdf”,当链接上的onclick事件时,该文件将保存为“myfile.pdf”。好的。但是现在,想象一下在我的代码示例中,我将生成 4 个链接(每个链接都有自己的 id:value[0]),下载的四个文件都称为 myfile.pdf。这 4 个文件将保存为 myfile(1).pdf、myfile(2).pdf...myfile(4).pdf。 我不想要这样。我想用数组上的数字(值[1])重命名这些下载的文件。 即:7373myfile.pdf、8888myfile.pdf.... 9999myfile.pdf.

我该怎么做?这是我的代码:

<script src=https://code.jquery.com/jquery-3.6.0.min.js 
</script>
    
    
<script id="funciones">
        var count = 0;
    
        function linkGen() {
            var requestId =[
                ['111111111111111111111111111111111111','7373'],
                ['222222222222222222222222222222222222','8888'],
                ['333333333333333333333333333333333333','6767'],
                ['444444444444444444444444444444444444','9999']
            ]
            
    
            count = 0;
            var html = '';
            $.each(requestId, function (item, value) {
                var link = 'https://mylink.com/index.php?entryPoint=download&id=' + value[0] + '&type=Note';
                count++;
                var fileName = value[1] + '_' + getFileNameFromUrl(link); //HERE I WANT TO RANME FILE, BUT IT DON'T WORK
                html += '<div><a href="' + link + '" id="link' + count + '" download="' + fileName + '" onclick="event.preventDefault(); window.open(`' + link + '`, `_blank`);">Link ' + count + '</a></div>';
            })
            $('div').html(html);
        }
    
        function getFileNameFromUrl(url) {
            var parts = url.split("/");
            return parts[parts.length - 1];
        }
    
        linkGen();
    
        link = 0;
        function down() {
            if (link <= count) {
                var enlace = $('#link' + link).attr('href');
                $('#link' + link).click();
                link++;
                console.log(link + ' - ' + enlace);
            }
        }
    
        function buttonOn() {
            setInterval(down, 1000);
        }
</script>
javascript html jquery file browser
1个回答
0
投票

在 Web 浏览器中,您无法使用 JavaScript 或 jQuery 直接重命名保存到用户下载文件夹的文件。浏览器的文件下载行为由用户的设置决定,出于安全和隐私考虑,一旦文件下载到用户系统,网站就无法以编程方式更改文件名。

但是,您可以为用户提供在启动下载之前指定自定义文件名的选项。以下是如何修改代码以允许用户指定自定义文件名:

<!DOCTYPE html>
<html>
<head>
    <title>Download Files with Custom Names</title>
</head>
<body>
    <div>
        <a href="#" id="downloadLink">Download File 1</a>
        <input type="text" id="customFileName" placeholder="Enter custom file name">
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

JavaScript(script.js):

$(document).ready(function () {
    // Add a click event handler to the download link
    $("#downloadLink").click(function (e) {
        e.preventDefault();

        // Get the custom file name entered by the user
        var customFileName = $("#customFileName").val().trim();

        if (customFileName === "") {
            alert("Please enter a custom file name.");
            return;
        }

        // Define the file URL
        var fileUrl = "https://example.com/path/to/yourfile.pdf"; // Replace with your file URL

        // Create an invisible anchor element
        var a = document.createElement("a");
        a.style.display = "none";
        document.body.appendChild(a);

        // Set the anchor's href and download attributes with the custom file name
        a.href = fileUrl;
        a.download = customFileName + ".pdf";

        // Trigger a click event on the anchor element to start the download
        a.click();

        // Clean up by removing the anchor element
        document.body.removeChild(a);
    });
});

使用此代码,用户可以在输入字段中输入自定义文件名,当单击“下载文件”链接时,将以指定名称下载文件。如果他们不提供自定义名称,他们将收到一条警报,提示他们输入名称。

© www.soinside.com 2019 - 2024. All rights reserved.