Prevent browser from caching uploading images

Question

After loading page, I want to upload different images to server several times. Each time I choose image, ajax uploads it to server and then shows on screen. Problem is that it continues to upload the rest images after I choose them one after another, but shows on the screen only image N1 each time.

Script:

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

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 is here

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

Now after I upload first image, it continues to show only first image even after I upload second, third and etc. I thought cache: false, will prevent this but, unfortunately first image is cached :( Any way to solve this problem ?

Answer 1

You are relying on a global file object. This is not really dependable because you do not know what happens to the variable.

its better to envelop the whole into a function that you call whilst passing the parameters needed.

Also you are passing a new FormData(formData[0]) which also gave erros in my tests.

This is what I came up with that works

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