搜索文件並在href中下載以供下載

Question

使用Jquery和PHP在目錄中搜索文件。如果存在，請將其顯示在帶有下載功能的< a>標籤中。

代碼大部分適用。但是，我遇到了導致鏈接多次顯示的錯誤。

使用javascript開始：顯示數據表

$('#submitSearch').on('click', function() 
{ 
    var voyage = $('#voyageText').val(); 
    $.post('searchVoyages.php', {voyage:voyage}, function(data) 
    { 
    var obj = JSON.parse(data); 
    $('#voyageBody').empty(); 
    var htmlToInsert = obj.map(function (item) 
    { 
     return '<tr><td><a href="#" class="voyageFileCall" data-filevoyage="'+item.voyage+'">'+item.voyage+'</a> 
     <td>'+item.export_import+'</td></tr>'; 
    }); 
    $('#voyageBody').html(htmlToInsert);  

    // The user submits a search, and the data is returned and displayed 
    // in a datatable. (image below) The next part is where the user clicks 
    // the link to open a modal window that display a download link 

    $('.voyageFileCall').on('click', function(e) 
    { 
     e.preventDefault(); 
     var filevoyage = $(this).attr('data-filevoyage'); 
     $.post('fileDownload.php', {filevoyage:filevoyage}, function(data) 
     { 
     $('.filelink').empty(); 
     var htmlToInsert = obj.map(function (item) 
     { 
      return '<a href="'+data+'" download>"'+data+'"</a>'; 
     }); 
     $('.filelink').html(htmlToInsert); 
     }); 

     $('#downloadFileModal').modal('show'); 
    }); // end voyageFileCall click 
    }); // end searchVoyage post 
}); // end submitSearch click 

後，第一列（即鏈接）有一個名爲.voyageFileCall類，點擊後會採取的屬性，並張貼到這個過程被稱爲fileDownload.php。

這裏是fileDownload.php樣子：

<?php 
if(isset($_POST['filevoyage'])) 
{ 
    $voyage = $_POST['filevoyage']; 
    $dir = scandir("backup/"); 
    unset($dir[0], $dir[1]); 

    if(count($dir) > 0) 
    { 
    $fileFound = false; 
    foreach($dir as $file) 
    { 
     if((preg_match("/\b$voyage\b/", $file) === 1)) 
     { 
     $finalLink = 'backup/'.$file; 
     echo $finalLink; // I think the problem is in this loop 
     $fileFound = true; 
     } 
    } 
    if(!$fileFound) die("File $voyage doesn't exist"); 
    } 
    else 
    { 
    echo "No files in backup folder"; 
    } 
} 
?> 

所以，當我返回變量$ finalLink，出於某種原因，它會顯示該鏈接的相同的次數返回多少數據在數據表中。

但是，當他們點擊鏈接，和窗口將打開，這是他們所看到的：

在控制檯中，我看到：

模式窗口應打開一個單一的鏈接，用戶可以點擊d從目錄下載文件。但是它似乎顯示了相同的鏈接，但是顯示的是從初始搜索返回的數據量。

在這種情況下，初始搜索返回7條記錄。當用戶點擊其中一個鏈接時，模式會打開7個具有相同文件名的鏈接。我可以點擊每一個，它會下載我的文件。但我只想顯示1個鏈接。

請幫我修復我的代碼。我知道它與PHP過程中的foreach循環有關。我只是不知道如何解決它。

謝謝。

Answer 1

當你找到適合你的$ _POST ['filevoyage']值的通訊文件時，在foreach下放一段腳本。

<?php 
if(isset($_POST['filevoyage'])) 
{ 
    $voyage = $_POST['filevoyage']; 
    $dir = scandir("backup/"); 
    unset($dir[0], $dir[1]); 

    if(count($dir) > 0) 
    { 
    $fileFound = false; 
    foreach($dir as $file) 
    { 
     if((preg_match("/\b$voyage\b/", $file) === 1)) 
     { 
     $finalLink = 'backup/'.$file; 
     echo $finalLink; // I think the problem is in this loop 
     $fileFound = true; 
     break; # *** break here *** 
     } 
    } 
    if(!$fileFound) die("File $voyage doesn't exist"); 
    } 
    else 
    { 
    echo "No files in backup folder"; 
    } 
} 
?> 

JS部分： 也請看JS。推遲添加在我的腳本下的$('#submitSearch')和$('.voyageFileCall')附加事件中的「點擊」下的命名空間事件，並在event.preventDefault()附近添加event.stopImmediatePropagation()。將「e」或「event」（根據您的閱讀偏好）傳遞給「jquery on click」上的被調用函數。

$(document) 
.off('click.submitSearch') 
.off('click.voyageFileCall') 
.on('click.submitSearch', '#submitSearch', function (e) { 
    e.preventDefault(); 
    e.stopImmediatePropagation(); 
    var voyage = $('#voyageText').val(); 
    $.post('searchVoyages.php', {voyage: voyage}, function (data) { 
     var obj = JSON.parse(data); 
     $('#voyageBody').empty(); 
     var htmlToInsert = obj.map(function (item) { 
      return '<tr><td><a href="#" class="voyageFileCall" data-filevoyage="' + item.voyage + '">' + item.voyage + '</a><td>' + item.export_import + '</td></tr>'; 
     }); 
     $('#voyageBody').html(htmlToInsert); 

     // The user submits a search, and the data is returned and displayed 
     // in a datatable. (image below) The next part is where the user clicks 
     // the link to open a modal window that display a download link 
    }) 
}) 
.on('click.voyageFileCall', '.voyageFileCall', function (e) { 
    e.preventDefault(); 
    e.stopImmediatePropagation(); 
    var filevoyage = $(this).attr('data-filevoyage'); 
    $.post('fileDownload.php', {filevoyage: filevoyage}, function (data) { 
     $('.filelink').empty(); 
     var htmlToInsert = '<a href="' + data + '" download>"' + data + '"</a>'; 
     $('.filelink').html(htmlToInsert); 
    }); 

    $('#downloadFileModal').modal('show'); 
}); 

希望這會有所幫助。