1

ドロップダウンが 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 に名前を付ける必要があります。

<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');
    }
?>

3 番目に、フォルダが$download_directoryハード ドライブ上の正確な場所を含むように編集します。必要に応じて、ファイルを配列/downloads/に追加できます。$exclude_files

于 2013-01-09T17:44:00.017 に答える