2015-08-20 72 views
1

我有頁面顯示來自不同目錄的圖像,並可以根據它們在jQuery可排序列表中的順序來更改文件夾中文件的文件名。Ajax網頁不能顯示重定向後的最新更新日期內容

到目前爲止,除了在保存新文件名和保存頁面重定向到編輯頁面之後,我必須執行「清空緩存和硬重新載入」,以便顯示新文件順序。

編輯頁面

<!DOCTYPE html> 
<?php 
session_start(); 
if (!$_SESSION['username']) { 
    echo "<script>window.location = './index.php'</script>"; 
} 
?> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <meta http-equiv="Cache-control" content="no-cache"> 
     <meta http-equiv="Expires" content="-1"> 
     <link rel="stylesheet" href="../js/jquery/jquery-ui-1.11.4/jquery-ui.css"> 
     <script src="../js/jquery/jquery-2.1.4.min.js"></script> 
     <script src="../js/jquery/jquery-ui-1.11.4/jquery-ui.js"></script> 
     <script> 
      $(window).load(function() { 
       $(document).ready(function() { 
        $("#btnRefresh").click(function() { 
         window.location.reload(true); 
        }); 
        $.ajax({ 
         url: 'getPics.php', 
         success: function(resultOfAjaxCall) { 
          xmlDoc = $.parseXML(resultOfAjaxCall); 
          $xml = $(xmlDoc); 
          html = ""; 
          $xml.find('Folder').each(function(index) { 
           //console.log($(this).attr('Name')); 
           city = $(this).attr('Name'); 
           html += "<h3 class='accordion-header'>" + city + "</h3>"; 
           html += "<div class='accordion-section'>"; 
           html += "<button id='" + city + "_Save'>Save " + city + "</button>"; 
           html += " "; 
           //Upload Form 
           html += '<form enctype="multipart/form-data" action="uploader.php" method="POST">'; 
           html += '<input type="hidden" name="MAX_FILE_SIZE" value="100000" />'; 
           html += '<input type="hidden" name="City_Folder" value="' + city + '" />'; 
           html += 'Choose a file to upload: <input name="userfile" type="file" /><br />'; 
           html += '<input type="submit" value="Upload File" />'; 
           html += '</form>'; 
           //Save Form 
           html += '<form enctype="multipart/form-data" action="save.php" method="POST" id="' + city + '_Save_Form">'; 
           html += '<input type="hidden" name="City_Folder" value="' + city + '" />'; 
           html += '</form>'; 
           html += "<ul class='" + city + "-sortable-list'>"; 
           $(this).find('File').each(function(index) { 
            //console.log($(this).text() 
            fileName = $(this).find('File_Name').text(); 
            filePath = $(this).find('File_Path').text(); 
            fileRealPath = $(this).find('File_Real_Path').text(); 
            //console.log(fileName); 
            //console.log(filePath); 
            html += '<form enctype="multipart/form-data" action="delete.php" method="POST" id="' + fileName + '_Delete_Form">'; 
            html += '<input type="hidden" name="Delete_Path" value="' + filePath + '" />'; 
            html += '</form>' 
            html += "<li id='" + fileName + "' class='ui-state-default' value='" + fileRealPath + "'>" + fileName + " "; 
            html += "<button id='" + fileName + "_Delete'>Delete</button>"; 
            html += "<br>" 
            html += "<img src='" + filePath + "' style='width:150px;'/>"; 
            html += "<br></li>"; 
           }) 
           html += "</ul>"; 
           html += "</div>"; 
           //window.location.reload(true); 
          }); 
          $("#accordion").append(html); 
          var $accordion = $("#accordion").accordion({ 
           collapsible: true, 
           heightStyle: "content", 
           active: false 
          }); 
          $("[class$=-sortable-list]").sortable({ 
           update: function(event, ui) { 
            console.log(ui); 
            var order = []; 
            $("[class$=-sortable-list] li").each(function(e) { 
             order.push($(this).attr("id") + "=" + ($(this).index() + 1)); 
            }); 
            var positions = order.join(); 
            //  alert(positions); 
           }, 
           stop: function(event, ui) { 
            console.log("an item was moved"); 
            $accordion.find("#tmp").remove(); 
           }, 
           start: function(event, ui) { 
            $accordion.append("<ul id='tmp'></ul>"); 
              $accordion.find("#tmp").append(ui.item); 
           } 
          }).disableSelection(); 


          //Save Click 
          $("[id$=_Save_Form]").submit(function(event) { 
           folder = event.target.id.replace("_Save_Form", ""); 
           $("." + folder + "-sortable-list li").each(function(e) { 
            //alert(folder); 
            //alert($(this).index()); 
            //alert($(this).attr("value")); 
            $("<input />").attr("type", "hidden") 
              .attr("name", "path[" + $(this).index() + "]") 
              .attr("value", $(this).attr("value")) 
              .appendTo("#" + event.target.id); 
           }); 

          }); 
          $("[id$=_Save]").click(function(event) { 
           $("#" + event.target.id + "_Form").submit(); 
          }); 
         } 
        }); 
       }); 
      }); 
     </script> 
     <title>Edit Slider</title> 
    </head> 
    <body> 
     <?php ?> 
     <p>You are logged in as <?= $_SESSION['username'] ?> (<a href="./index.php?logout=1">Logout</a>)</p> 
     <p><button id="btnRefresh">Refresh</button></p> 

     <div id="accordion"> 

     </div> 
    </body> 
</html> 

保存頁面

<?php 
$root = filter_input(INPUT_SERVER, "DOCUMENT_ROOT", FILTER_SANITIZE_STRING, FILTER_SANITIZE_MAGIC_QUOTES); 
require $root . '/CC_Library/CC_Folder.php'; 
require $root . '/CC_Library/CC_String.php'; 
$folder = filter_input(INPUT_POST, "City_Folder", FILTER_SANITIZE_STRING, FILTER_SANITIZE_MAGIC_QUOTES); 
$dir = ""; 
$i = 0; 
$s = new CC_String; 
$tmp = $s->generate_rand(5); 
foreach ($_POST['path'] as $value) { 
    $CC = new CC_File($value); 
    $dir = $CC->get_File_Dir(); 

    echo "Changing " . $CC->get_Full_File_Name() . " to " . $tmp . str_pad($i, 10, '0', STR_PAD_LEFT) . "." . $CC->get_File_Extension() . "<br>"; 
    $CC->Rename($tmp . str_pad($i, 10, '0', STR_PAD_LEFT) . "." . $CC->get_File_Extension()); 
    $i++; 
} 
$j = 0; 
//echo $dir; 
$F = new CC_Folder($dir); 
$Files = $F->get_Folder_Files(); 
foreach ($Files as $value) { 
    echo "Changing " . $value->get_Full_File_Name() . " to " . $folder . "-" . str_pad($j, 8, '0', STR_PAD_LEFT) . "." . $value->get_File_Extension() . "<br>"; 
    $value->Rename($folder . "-" . str_pad($j, 8, '0', STR_PAD_LEFT) . "." . $value->get_File_Extension()); 
    $j++; 
} 
echo "<script>window.location.replace('Edit_Slider.php')</script>"; 

回答

3

我不想讀了這一切臭名昭著的代碼。你的問題是客戶端,而不是服務器端,所以你的代碼是不敬的。 您的瀏覽器正在緩存,而不是更新您的圖像。針對此解決將是當前圖像源與時間戳擴展,像這樣:

<img src="image.jpg?lastmod=12345678" 

// JavaScript的

function(img_src){ 
    var timestamp = (new Date()).getTime(); 
    img_src += "lastmod?" + timestamp; 
} 

how to clear or replace a cached image

這部作品的原因是因爲源地址是因爲時間戳每次都會有所不同&網頁瀏覽器會記住相對於URL的內容。