1

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

我不确定执行此操作的最佳方法，并且在搜索了几个小时后没有找到任何帮助

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

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

4 回答 4

4

你可以使用这样的代码：

<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>
于 2013-01-09T17:11:18.700 回答
1

您需要在您的选择上加上一个名称，以便轻松地使用 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;
}
于 2013-01-09T17:08:55.677 回答
1

试试这样：

使用 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>
于 2013-01-09T17:21:54.257 回答
0

如果我理解正确，这应该可以满足您的要求：

首先将您的 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阵列中。

于 2013-01-09T17:44:00.017 回答