How can I reload an image with ajax after uploading it?

0

I have to upload an image to the server and show it on the page once it is uploaded, the first time everything works normally, the problem is that it is cached when it is uploaded and it does not change unless the browser is refreshed. This is the code:

$(".post-file").click(function() {
    // Determine which button was pressed //
    editPersonnelBtn = $(this).attr("name");

    $(".ajaxFormUpdate").submit(function(e) {
        e.preventDefault();
        $('#mainContent1').html('<div align="center"><img src="assets/images/loading.gif"/></div>');
        var postData = new FormData($(this)[0]);
        var formURL = $(this).attr("action");
        $.ajax({
            url : formURL,
            type: "POST",
            data : postData,
            cache: false,
            processData: false,
            contentType: false,
            success:function(data, textStatus, jqXHR) {
                $("#mainContent1").html(data);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert("Connection error");
            }
        });
        e.preventDefault(); //STOP default action
        e.unbind();
    });
});

And this is the html

<div class="col-sm-6">
    <div class="well">
        <legend class="text-center">Mi firma</legend>
        <form name="ajaxFormUpdate" enctype="multipart/form-data" class="ajaxFormUpdate" action="assets/contentHtml/handler-profile-manager.php" method="post">
            <input type="hidden" name="formSelector" value="selectSign" />
            <div id="drop_zone" ondrop="dropHandler(event);">
                <input type="hidden" name="MAX_FILE_SIZE" value="5000000" />
                <input name="sign" id="sign" type="file" accept="image/*" required/><small>solo pdf (5MB max)</small><br><br>
            </div><br>
            <button class="btn btn-info post-file btn-profile-manager" name="btw-sign" id="btw-sign">Aceptar</button>
        </form>
    </div>
</div>

<div class="col-sm-6">
    <div class="well">
        <!-- This is where the content is -->
        <div class="text-center" id="mainContent1">
            <img src="<?php echo $ruta ?>" width="50%" heigth="50%">
        </div>
    </div>
</div>
    
asked by Fernando Garcia 07.05.2018 в 04:55
source

0 answers