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 ?

`POST` requests aren't cached. Also what is `file`? – Musa Mar 25 '15 at 11:56 — Musa, Mar 25 '15 at 11:56
check question again, I've added missing string – David Mar 25 '15 at 11:57 — David, Mar 25 '15 at 11:57

Tschallacka · Accepted Answer · 2015-03-25T13:47:21.360

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

edited Mar 25 '15 at 13:47

answered Mar 25 '15 at 11:55

Tschallacka

27,901
14
88
133

Modified answer. I have a working demo that changes the image. – Tschallacka Mar 25 '15 at 12:18
That does not work then in PHP That's why I had to send data: new FormData(formdata[0]) – David Mar 25 '15 at 12:30
if you do in php `var_dump($_POST['userpic']);` what do you get? – Tschallacka Mar 25 '15 at 12:36
On PHP side I'm waiting for $_FILES["file"]["type"]. Shall I wait for $_POST['userpic'] ? – David Mar 25 '15 at 12:38
Well, yea, because that's what you are passing along to the form if you use my method. `formData.append('userpic',` the userpick in this case defines the post field variable in php – Tschallacka Mar 25 '15 at 12:39
Well OK, suppose I send userpic. which equals to $_FILES["file"]["type"]] probably. But what then should I do with other parameters which I wait for on Server Side such as : $_FILES["file"]["name"]; $_FILES['file']['tmp_name']; $_FILES["file"]["type"]; $_FILES["file"]["error"]; $_FILES["file"]["size"]; – David Mar 25 '15 at 12:43
Just do a `var_dump($_POST);` and `console.log(data)` it in your success function. Or see what renaming userpic to file does for you. – Tschallacka Mar 25 '15 at 12:45
success function receives "array(0) { }" How can I access the file and it's parameters ? – David Mar 25 '15 at 13:35
FormData support starts from following desktop browsers versions. IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+ For more detail, see https://developer.mozilla.org/en-US/docs/XMLHttpRequest/FormData which browser are you on? – Tschallacka Mar 25 '15 at 13:37
Chrome Version 41.0.2272.101 m | Google Chrome is up to date. – David Mar 25 '15 at 13:40
By the way the whole process is working if I use data: new FormData(formdata[0]) Just have problems in JS with image caching, but PHP side works perfectly. – David Mar 25 '15 at 13:41
i've updated the snippet. and if it works with formdata[0] go with that, but if you use that does the image still update or not? – Tschallacka Mar 25 '15 at 13:46
I think this code is not working. even in your example. – David Mar 25 '15 at 14:00

Prevent browser from caching uploading images

1 Answers1