Question

我想要创建一个只有一个下拉列表的表单 - 这些下拉列表引用一个文件，然后客户可以在选择时下载该文件。

我不确定这样做的最佳方法，并且在几个小时的搜索之后找不到任何帮助

这是我到目前为止所拥有的：

<form action="">
    <select>
        <option value="/downloads/file1.pdf">File 1</option>
        <option value="/downloads/file2.pdf">File 2</option>
        <option value="/downloads/file3.pdf">File 3</option>
        <option value="/downloads/file4.pdf">File 4</option>
        <option value="/downloads/file5.pdf">File 5</option>
    </select>
    <input value="Download" class="grey-btn" />
</form>

Answer 1

您可以使用以下代码：

<form onsubmit="this.action = document.getElementById('filename').value">
    <select id="filename">
        <option value="/downloads/file1.pdf">File 1</option>
        <option value="/downloads/file2.pdf">File 2</option>
        <option value="/downloads/file3.pdf">File 3</option>
        <option value="/downloads/file4.pdf">File 4</option>
        <option value="/downloads/file5.pdf">File 5</option>
    </select>
    <input type="submit" value="Download" class="grey-btn" />
</form>

Answer 2

您需要在选择中添加一个名称，以便轻松地使用JavaScript挂接它。

<select name="files">

然后您需要在按钮上调用一个函数来调用函数：

<input value="Download" onclick="download()" class="grey-btn" />

JS功能：

function download() {
    //get the filename from the selected item
    var sel = document.forms[0].files[document.forms[0].files.selectedIndex].value;
    //redirect to this file
    document.location = sel;
}

Answer 3

试试这样：

使用jQuery：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <title>Download</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<select id="dwl">
<option value="/downloads/file.pdf">File 1</option>
<option value="/downloads/file2.pdf">File 2</option>
<option value="/downloads/file3.pdf">File 3</option>
<option value="/downloads/file4.pdf">File 4</option>
<option value="/downloads/file5.pdf">File 5</option>
</select>
<input type="button" onclick="window.location.href=$('#dwl').val()" value="Download" class="grey-btn" />
</body>
</html>

或者，只是纯JavaScript：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <title>Download</title>
<body>
<select id="dwl">
<option value="/downloads/file.pdf">File 1</option>
<option value="/downloads/file2.pdf">File 2</option>
<option value="/downloads/file3.pdf">File 3</option>
<option value="/downloads/file4.pdf">File 4</option>
<option value="/downloads/file5.pdf">File 5</option>
</select>
<input type="button" onclick="window.location.href=document.getElementById('dwl').value" value="Download" class="grey-btn" />
</body>
</html>

Answer 4

如果我理解正确，这应该做你要求的：

首先将HTML更新为：

<form method="POST" action="dl-file.php">
    <select id="filename" name="filename">
        <option value="file1.pdf">File 1</option>
        <option value="file2.pdf">File 2</option>
        <option value="file3.pdf">File 3</option>
        <option value="file4.pdf">File 4</option>
        <option value="file5.pdf">File 5</option>
    </select>

    <input type="submit" value="Download" class="grey-btn" />
 </form>

然后在HTML文件所在的同一目录中创建一个新文件，并将其命名为 dl-file.php 并将其放入其中：

<?php
    // Put any files you don't want the user to download here
    $exclude_files = array('.htaccess', '.DS_STORE', '.htpasswd');

    // full path to the download directory
    $download_directory = 'C:\xampp\htdocs\test\filedlselect/downloads/';

    $file_to_download = filter_input(INPUT_POST, 'filename', FILTER_SANITIZE_STRING);

    $full_path = $download_directory . $file_to_download;

    if (!in_array($file_to_download, $exclude_files) && 
        file_exists( $full_path ) && is_readable( $full_path )) {
        header('Pragma: public');
        header('Expires: 0');
        header('Cache-control: must-revalidate, post-check=0, pre-check=0');
        header('Last-modified: ' . gmdate('D, d M Y H:i:s', filemtime($full_path)) . 'GMT');
        header('Cache-control: private', false);
        header('Content-type: application/force-download');
        header('Content-disposition: attachment; filename="' . basename($full_path) . '"');
        header('Content-Transfer-Encoding: binary');
        header('Content-Length: ' . filesize($full_path));
        header('Connection: close');
        readfile($full_path);
        exit;
    } else {
        die('invalid file');
    }
?>

第三，编辑$download_directory以包含/downloads/文件夹中硬盘上的确切位置。您可以选择将文件添加到$exclude_files阵列。

创建一个选择可下载文件的表单

4 个答案: