JCChan JCChan - 2 years ago 95
Javascript Question

how to preview a image before and after upload?

I going to preview a image or photo in a form,but it doesn't work and the HTML code look like this as below:

<form action="" method="post" enctype="multipart/form-data" name="personal_image" id="newHotnessForm">
<p><label for="image">Upload Image:</label>
<input type="file" id="imageUpload"/></p>
<p><button type="submit" class="button">Save</button></p>
<div id="preview">
<img width="160px" height="120px" src="profile pic.jpg" id="thumb" />

and incorporated JS code/script below:

<script type="text/jaavascript">
var thumb=$('#thumb');
new AjaxUpload('imageUpload',{

There are 2 main questions on my form:

1.Why doesn't the preview of the image or picture work?

2.How to paste the photo from the form when the save button is clicked,it will go/link to another php or php page that I created?

Answer Source

Try this: (For Preview)

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


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

Working Demo here>

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