Upload preview image using jquery

Question

I am trying upload file and immediately preview there uploaded image. I have there 2 file upload one is for profile and second one is logo. When I upload profile image preview in logo section instead of profile section. Below, I given code, please help me. Profile Upload code:

<input type="file" name="profile_img" id="imageUpload" accept=".png, .jpg, .jpeg" />
<div id="imagePreview" style="background-image: url(images/profile.jpg);">

<script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#imagePreview').css('background-image', 'url('+e.target.result +')');
                $('#imagePreview').hide();
                $('#imagePreview').fadeIn(650);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#imageUpload").change(function() {
        readURL(this);
    });         
</script>

Logo Upload code:

<input type="file" name="logo_img" id="logoUpload" accept=".png, .jpg, .jpeg" />
<div id="logoPreview" style="background-image: url(images/profile.jpg);">

<script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#logoPreview').css('background-image', 'url('+e.target.result +')');
                $('#logoPreview').hide();
                $('#logoPreview').fadeIn(650);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#logoUpload").change(function() {
        readURL(this);
    });         
</script>

Answer 1

If you define multiple functions with the same name, only the last defined function will be used.

You can either just call them different things, example: readProfileURL() and readLogoURL() .

However, since your functions are so similar, a better approach would be to only have one function where you pass the differences:

function readURL(input, previewId) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $(previewId).css('background-image', 'url('+e.target.result +')');
            $(previewId).hide();
            $(previewId).fadeIn(650);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

Now you can call it with:

$("#imageUpload").change(function() {
    readURL(this, '#imagePreview');
});  

and

$("#logoUpload").change(function() {
    readURL(this, '#logoPreview');
});