Showing an Image Preview in the form

Home Forums Quform WordPress Showing an Image Preview in the form

This topic is: resolved

This topic contains 4 replies, has 3 voices, and was last updated by  Ally 5 months ago.

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>
    <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>
    <![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 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.