Question

134

How to preview an image before and after upload?

rated 0 times [ 135] [ 1] / answers: 1 / hits: 118244 / 11 Years ago, thu, april 25, 2013, 12:00:00

I am going to preview an image or photo in a form, but it doesn't work and the HTML code looks 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 />

        </div>

    </form>

and incorporated JS code/script below:

<script type=text/jaavascript>

$(document).ready(function(){

    var thumb=$('#thumb');

    new AjaxUpload('imageUpload',{

    action:$('newHotnessForm').attr('action'),

    name:'image',

    onSubmit:function(file,extension){

        $('#preview').addClass('loading');

    },

    onComplete:function(file,response){

        thumb.load(function(){

            $('#preview').removeClass('loading');

            thumb.unbind();

        });

        thumb.attr('src',response);

    }

    });

});

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

nellykaliae

Add To Favorites

Follow

Total Points: 119

Total Questions: 95

Total Answers: 103

Location: Pitcairn Islands

Member since Fri, Oct 15, 2021

3 Years ago

answered 11 Years ago benitoh · Accepted Answer

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

            }



            reader.readAsDataURL(input.files[0]);

        }

    }

</script>



<body>

    <form id=form1 runat=server>

        <input type=file onchange=readURL(this); />

        <img id=blah src=# alt=your image />

    </form>

</body>

Working Demo here>