Graham Graham - 5 months ago 13
jQuery Question

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.

Answer

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>

Here is the preview: http://jsbin.com/uboqu3/edit#javascript,html,live

I think it can help you.