防止瀏覽器緩存上傳圖片

Question

加載頁面後，我想多次上傳不同的圖片到服務器。 每次我選擇圖像時，ajax會將其上傳到服務器，然後在屏幕上顯示。 問題在於，我一個接一個地選擇它們後繼續上傳剩餘圖像，但每次只在屏幕上顯示圖像N1。

腳本：

..............  

On File input box change 
    var file = this.files[0]; 
then run ajax 
$.ajax({ 
        url: "https://stackoverflow.com/users/img_upload", 
        type: "POST", 
        data: new FormData(formdata[0]), 
        contentType: false, 
        cache: false, 
        processData:false, 
        success: function(data) 
        { 
         var reader = new FileReader(); 
         reader.readAsDataURL(file); 
         reader.onload = imageIsLoaded; 

imageIsLoaded功能在這裏

function imageIsLoaded(e) { 
$('#img').attr('src', e.target.result); 

現在，我第一次上傳圖片後，它仍然只顯示第一圖像即使我上傳的第二，第三等。我想cache: false,會阻止這個，但不幸的是，第一個圖像緩存:(任何方式來解決這個問題？

Answer 1

您正在依靠一個全局文件對象噸。這不是真正可靠的，因爲你不知道變量發生了什麼。

它更好地將整個信封包含在您調用的函數中，同時傳遞所需的參數。

此外，你傳遞一個新的FormData（formData [0]），這也給我的測試erros。

這是我想出了工作

function runme(files) { 
 
    formData = new FormData(); 
 
    $.each(files, function(key, value) 
 
    { 
 
     formData.append(key, value); 
 
    }); 
 
    formData.append('userpic', file, 'upload.jpg'); 
 
       $.ajax({ 
 
        url: "https://stackoverflow.com/users/img_upload", 
 
        type: "POST", 
 
        data: formData, 
 
        contentType: false, 
 
        cache: false, 
 
        processData:false, 
 
        success: function(data) 
 
        { 
 
         var reader = new FileReader(); 
 
         reader.readAsDataURL(file); 
 
         reader.onload = imageIsLoaded; 
 
        }, 
 
        error:function(data){ 
 
         var reader = new FileReader(); 
 
         reader.readAsDataURL(file); 
 
         reader.onload = imageIsLoaded; 
 
        } 
 
      }); 
 
} 
 

 
function imageIsLoaded(e) { 
 
$('#img').attr('src', e.target.result); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" onchange="runme(this.files);"> 
 
    <img src="#" id="img">