JSFiddle - React, Tailwind, and code Playground

by Ninjakannon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>
<form class = "ajaxform" method="post" 
    enctype = "multipart/form-data" 
    action  = 'upload.php'>
    <div id='view1' class='photo-target'>view1</div>
    <div id='view2' class='photo-target'>view2</div>
    <div id='view3' class='photo-target'>view3</div>
    <input type="file" name="imagefile" id="photo" />
</form>

CSS

.photo-target {
    background-color: silver;
    width: 100px;
    height: 100px;
}

.photo-target img {
    width: 100px;
    height: 100px;
}

JavaScript

function createObjectURL(object) {
    return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
}

function revokeObjectURL(url) {
    return (window.URL) ? window.URL.revokeObjectURL(url) : window.webkitURL.revokeObjectURL(url);
}

$(document).ready(function() {
    var photoTarget = null;
    
    $('#photo').on('change', function(event) {
        var src = createObjectURL(this.files[0]);
        var image = new Image();
        image.src = src;
        image.onload = function() {
            revokeObjectURL(this.src);
        };
        
        $("#" + photoTarget).append(image);
        $(".ajaxform").ajaxForm({
            target: '#view'
        }).submit();
    });

    $('.photo-target').click(function (event) {
        photoTarget = event.target.id;
        $("#photo").click();
    });
});