Monday, February 20, 2012

How to place an "inline image” in form before upload?


I want to allow users to write a post and upload images inline through out it (like a CMS blog post). Writing the file upload script is easy. But allowing a "place inline" button / functionality is proving to be tricky. Is there a tutorial on how to do this? I'm messing around with some javascript to allow it. Also, I'm not sure if I should display the inline tmp image or actually upload the file (with a separate upload button than the full form upload button) and show the actual image loc before the form is submitted? I'm all over the place on this right now. How should I go about this? Thank you.


Post by On
Tags , , , , ,

1 comment:

  1. UserFebruary 20, 2012 at 12:59 AM

    Use this Javascript code:

    <script type="text/javascript">
    function readURL(input) {
    if (input.files && input.files[0]) {
    var reader = new FileReader();

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

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


    Add this HTML:

    <body>
    <form id="form1" runat="server">
    <input type='file' onchange="readURL(this);" />
    <img id="blah" src="#" alt="your image" />
    </form>
    </body>


    I think it can help you :)

    ReplyDelete

Subscribe to: Post Comments (Atom)