javascript - 防止浏览器缓存上传图片

Question

加载页面后，我想多次上传不同的图像到服务器。每次我选择图像时，ajax 都会将其上传到服务器，然后显示在屏幕上。问题是，当我依次选择其余图像后，它继续上传它们，但每次在屏幕上只显示图像 N1。

脚本:

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

On File input box change
    var file = this.files[0];
then run ajax
$.ajax({
                    url: "/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])，这在我的测试中也出现了错误。

这就是我想出的有效方法

function runme(files) {
    formData = new FormData();
    $.each(files, function(key, value)
    {
        formData.append(key, value);
    });
    formData.append('userpic', file, 'upload.jpg');
               $.ajax({
                    url: "/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">