Preview your uploaded image before finalizing

Question

Preview your uploaded image before finalizing

I am currently working on implementing a new upload feature for users of our forum. This feature will allow them to upload a personal picture. Here is what I have developed so far:

HTML

<label>Profile image</label>
    <div class="photo" id="photoPreview"></div>
    <input type="file" value="forumPhoto" onchange="return changePhoto(this);">

JAVASCRIPT

function showPhotoPreview() {
        var photoUrl = $.trim($("#photo").val());
        var img = $("#photoPreview img");
        if (photoUrl != "") {
            if (img.length == 0) {
                img = $("<img />").appendTo($("#photoPreview"));
            }
            img.prop("src", photoUrl);
        }
        else {
            img.remove();
        }
    }

    function changePhoto(sender) {
        var value = $(sender).val();
        sender.selectedIndex = 0;
        switch (value) {
            case "upload":
                assignPicture();
                break;
        }
        showPhotoPreview();
        return false;
    }

    function assignPicture() {
        var forumPhoto = $("#forumPhoto").val();
        if (forumPhoto == "") {
            alert("You must specify an address to use forumPhoto.");
            return;
        }
        $("#photo").val(forumPhoto);
    }

The current challenge I am facing is that the preview picture is not displaying properly.

JsFiddle: http://jsfiddle.net/qLsY7/

javascript jquery html css

Answer 1

Answer №1

To achieve your goal, you will need to use either HTML5 (FileReader) or Flash. JavaScript/iFrames have security measures in place to prevent the browser from accessing and displaying local user files, thus preventing malicious activities.

For a practical example using Mootools 1.3.2, which can be converted to jQuery, I had to modify the XHR method to handle the request. Similarly, you may need to do the same with jQuery. Note that I check for FileReader capability and disable preview without it.

You can also utilize the window.FormData method to streamline the upload process via AJAX and update the image upon successful interaction with the server.

HTML:

<div id="wrapper">
    <form id="ajaxFileForm" method="post" action="processFile.php" enctype="multipart/form-data">
        <input id="imageToUpload" name="file" type="file"><br>
        <input name="somefield" type="text" value="Hello World"><br>
        <button id="previewBtn" type="button" disabled="">Preview</button>
        <button id="uploadBtn" type="submit" disabled="">Upload</button>
    </form>
    <div id="previewWrapper">
        <h4>Preview Image:</h4>
        <img style="display:none;" src="/assets/img/pixel.gif" id="preview" alt="Image Preview">
        <div id="info"></div>
    </div>
    <hr style="height:1px; border:0; background: #666;">
    <div id="responseWrapper" style="display: none">
        <h4>Response:</h4>
        <div id="output"></div>
    </div>
</div>

Javascript:

// Custom JavaScript code implementation...

Answer 2

To achieve your goal, you will need to use either HTML5 (FileReader) or Flash. JavaScript/iFrames have security measures in place to prevent the browser from accessing and displaying local user files, thus preventing malicious activities.

For a practical example using Mootools 1.3.2, which can be converted to jQuery, I had to modify the XHR method to handle the request. Similarly, you may need to do the same with jQuery. Note that I check for FileReader capability and disable preview without it.

You can also utilize the window.FormData method to streamline the upload process via AJAX and update the image upon successful interaction with the server.

HTML:

<div id="wrapper">
    <form id="ajaxFileForm" method="post" action="processFile.php" enctype="multipart/form-data">
        <input id="imageToUpload" name="file" type="file"><br>
        <input name="somefield" type="text" value="Hello World"><br>
        <button id="previewBtn" type="button" disabled="">Preview</button>
        <button id="uploadBtn" type="submit" disabled="">Upload</button>
    </form>
    <div id="previewWrapper">
        <h4>Preview Image:</h4>
        <img style="display:none;" src="/assets/img/pixel.gif" id="preview" alt="Image Preview">
        <div id="info"></div>
    </div>
    <hr style="height:1px; border:0; background: #666;">
    <div id="responseWrapper" style="display: none">
        <h4>Response:</h4>
        <div id="output"></div>
    </div>
</div>

Javascript:

// Custom JavaScript code implementation...

Answer 3

Answer №2

Give it a go, if you'd be so kind.

XHTML:

<form runat="server">
    <input type="file" id="picInput">
    <img src="#" alt="picture" id="pic">
</form>

JS:

function displayImage(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function(e) {
            $('#pic').attr('src', e.target.result);
        };

        reader.readAsDataURL(input.files[0]);
    }
}

$('#picInput').change(function() {
    displayImage(this);
});

Answer 4

Give it a go, if you'd be so kind.

XHTML:

<form runat="server">
    <input type="file" id="picInput">
    <img src="#" alt="picture" id="pic">
</form>

JS:

function displayImage(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function(e) {
            $('#pic').attr('src', e.target.result);
        };

        reader.readAsDataURL(input.files[0]);
    }
}

$('#picInput').change(function() {
    displayImage(this);
});

Preview your uploaded image before finalizing

Answer №1

Answer №2

XHTML:

JS:

Similar questions

Delete multiple selected rows from the table

Sending JSON data from SpringMVC to Java server

Issue encountered while attempting to pass a function within the data in React

Having trouble customizing the active state of a react router navlink using css modules in React?

Executing javascript whenever a page is updated

Adding a cell break line within AG-GRID in an Angular application

Can you provide me with instructions on how to change the background image?

If I click on a different VueJS menu, make sure to close the current menu

Error message: Uncaught TypeError - Unable to access property value from null reference in Quicksort.js

Angular: Enhance communication with controllers and directives

Adjust index starting from 0 in JavaScript

The Ruby on Rails application is having trouble detecting the stylesheet in the assets

Guide on redirecting to a new domain using a cookie in Express.js

The disable button functions properly upon first use, but fails to work after it has been pressed once. What steps can I

Methods for concealing the "image not found" icon in Internet Explorer and Chrome through CSS

Alignment of Material-UI dialogue buttons on the left side

Require a more efficient strategy for iterating through lines of input

Combining multiple data sources into a single input field in VueJs

Trouble fetching asynchronous data in Next.js Higher Order Component

What is the best way to access an error's body in order to retrieve additional error message details when using the forge-api with nodejs?