Showing an Image Preview in the form

Home Forums Quform WordPress Showing an Image Preview in the form

This topic is: resolved
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #12431
    shaunadams
    Participant

    Hello all Quformers,

    I’m trying to get an Image to preview before uploading, a bit like this example:
    http://blueimp.github.io/jQuery-File-Upload/

    I have tried this:
    <input type=”file” class=”multi with-preview” multiple />
    in an HTML field which shows a button but no image preview and does not link to the actual image.

    Does anybody know how I might do this, any help would be gratefully received

    #12433
    shaunadams
    Participant

    This seems to work:

    <!DOCTYPE html>
    <html>
    <head>
    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script&gt;
    <script>
    function readURL(input) {
    if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
    $(‘#img_prev’)
    .attr(‘src’, e.target.result)
    .width(150)
    .height(200);
    };

    reader.readAsDataURL(input.files[0]);
    }
    }
    </script>

    <meta charset=utf-8 />
    <title>JS Bin</title>
    <!–[if IE]>
    <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script&gt;
    <![endif]–>
    <style>
    article, aside, figure, footer, header, hgroup,
    menu, nav, section { display: block; }
    </style>

    </head>
    <body>
    <input type=’file’ onchange=”readURL(this);” />
    your image
    </body>
    </html>

    #12525
    Ally
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

    • This reply was modified 5 years, 11 months ago by Ally. Reason: Fix code layout
    #25004
    quagmire87
    Participant

    Hi,
    I’ve used the above script and it’s working! But when I want to remove the uploaded image, doesn’t remove the picture preview.
    Is there any solution to this problem?

    Thanks!

    #25044
    Ally
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy