Предотвращение кэширования при загрузке изображений

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

Вы полагаетесь на глобальный файл objec т. Это не является надежным, потому что вы не знаете, что происходит с переменной.

его лучше превратить в функцию, которую вы вызываете, передавая необходимые параметры.

Также вы передаете новую форму 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">