Preview for Image before Upload

Question

I am not sure why my Code does not work.

Here is my Javascript:

function readURL(input) {

        if (input.files && input.files[0]) {

            var reader = new FileReader();

            reader.onload = function (e) {

                $('#previewHolder').attr('src', e.target.result);

            }

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

        }

    }

    $("#images").change(function(){

        readURL(this);

    });

And here is my Html:

<form id="form1">
                    <input value="" type="file" id="images" name="images[]" accept="image/*" multiple/>
                    <img src="#" id="previewHolder" width="200px" alt="x.png"/>
                </form>

I have found several stackoverflow with literally the same Code and it works there. I can't find the missing Piece.

Answer 1

@Law, if you reference this doc, you'll notice that the change event only fires on <input> and <textarea> tags... You need to use $("#images").load(, as outlined here.