Asp.net Fileupload img preview

Question

I' have 5 fileupload control in a form. I want to preview selected img.

I can do it for one fileupload but for 5 control I had to change function like below

<div ><asp:FileUpload ID="FileUpload1" runat="server"   Width="100%" nchange="readURL(this)" /> </div>
 <img id="pre1" src="" alt="your image" class=" img-responsive" /> 

And to get preview using this

 <script>
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $(input).next().find('img').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        };
   </script>

If I try with class selector for one no problem. But I have 5 control and I had to get next img . Why it doesn't work?

Answer 1

Try this

$(input).parent().next('img').attr('src', e.target.result);

This should work.