Show (Display) multiple image preview before upload with ASP.Net FileUpload control using jQuery in C# and VB.Net

Hi nauna,

Check this example. Now please take its reference and correct your code.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
    $(function () {
        $("[id*=fuUpload]").change(function () {
            if (typeof (FileReader) != "undefined") {
                var dvPreview = $("#dvPreview");
                dvPreview.html("");
                var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
                $($(this)[0].files).each(function () {
                    var file = $(this);
                    if (regex.test(file[0].name.toLowerCase())) {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            var img = $("<img />");
                            img.attr("style", "height:100px;width: 100px");
                            img.attr("src", e.target.result);
                            dvPreview.append(img);
                        }
                        reader.readAsDataURL(file[0]);
                    } else {
                        alert(file[0].name + " is not a valid image file.");
                        dvPreview.html("");
                        return false;
                    }
                });
            } else {
                alert("This browser does not support HTML5 FileReader.");
            }
        });
    });
</script>
<asp:FileUpload ID="fuUpload" runat="server" multiple="multiple" />
<asp:Button ID="btnUpload" Text="Upload" runat="server" OnClick="Upload" />
<hr />
<div id="dvPreview">
</div>

Code

C#

protected void Upload(object sender, EventArgs e)
{
    for (int i = 0; i < Request.Files.Count; i++)
    {
        HttpPostedFile postedFile = Request.Files[i];
        if (postedFile.ContentLength > 0)
        {
            string fileName = System.IO.Path.GetFileName(postedFile.FileName);
            postedFile.SaveAs(Server.MapPath("~/Uploads/") + fileName);
        }
    }
}

VB.Net

Protected Sub Upload(ByVal sender As Object, ByVal e As EventArgs)
    For i As Integer = 0 To Request.Files.Count - 1
        Dim postedFile As HttpPostedFile = Request.Files(i)
        If postedFile.ContentLength > 0 Then
            Dim fileName As String = IO.Path.GetFileName(postedFile.FileName)
            postedFile.SaveAs(Server.MapPath("~/Uploads/") & fileName)
        End If
    Next
End Sub

Screenshot