获取图像预览？

Question

I want to add the image upload function and before uploading the file it should show the preview. My code works perfectly fine for the first part as displayed in image posted below but cannot make out why it does not work for the rest of the part. I have added image upload function at the end of each block but it only shows the preview for the first block and not for the rest.

Here is the code for the same.

while($row = mysqli_fetch_array($result)){

<form enctype="multipart/form-data" id="form" action="" method="post">
        <input type="file"  id="image" name="img" onChange="readURL(this);"/>
        <img id="blah" src="#" alt="your image" /><br/><br/>
        <input type="button" value="upload" onclick="javascript:uploadInage();" />
    </form>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>

function readURL(input) {

        if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah')
                .attr('src', e.target.result)
                .width(300)
                .height(340);
        };

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


  }
</script>
}

This is just a part of all the PHP I have.

Can you please help me add preview feature to all the block.

Answer 1

<script>

function readURL(input) {      
        if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            //$('#blah').attr('src', e.target.result).width(300).height(340);
             $(input).next('img').attr('src', e.target.result).width(300).height(340);
        };
        reader.readAsDataURL(input.files[0]);
    }

  }
</script>

THe commented line was used before. Changed it to the next line and works perfectly.