防止浏览器缓存上传图片

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

防止浏览器缓存上传图片

Prevent browser from caching uploading images

javascript

ajax

caching

image-processing

no-cache