Graham Graham - 1 year ago 57
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 Source

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) {


Add this HTML:

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

Here is the preview:,html,live

I think it can help you.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download