2013-01-09 23 views
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> 

回答

2

您可以使用這樣的代碼:

<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> 
+0

謝謝你們每個人的迴應 - 我確定他們都會工作,但我去了這個答案,因爲它要求我至少對我已有的代碼至少做一點 - 再次感謝 – rachael

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; 
} 
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> 
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陣列。

相關問題