防止浏览器缓存上传图片

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">