Upload File in Folder (Directory) and path in Database using jQuery Ajax and Generic Handler in ASP.Net

Last Reply one month ago By pandeyism

Posted one month ago

i want to upload file using jquery and save into folder before save itshow priverw in image field then convert into 350x350 size and compressed then saved into folder and path into database 

You are viewing reply posted by: pandeyism one month ago.
Posted one month ago

Hi SajidHussa,

Refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        #dvPreview
        {
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
            min-height: 450px;
            min-width: 450px;
            display: none;
        }
        img
        {
            height: 350px;
            width: 350px;
        }
    </style>
    <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 () {
            $("#fileupload").change(function () {
                $("#dvPreview").html("");
                var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
                if (regex.test($(this).val().toLowerCase())) {
                    if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
                        $("#dvPreview").show();
                        $("#dvPreview")[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $(this).val();
                    }
                    else {
                        if (typeof (FileReader) != "undefined") {
                            $("#dvPreview").show();
                            $("#dvPreview").append("<img />");
                            var reader = new FileReader();
                            reader.onload = function (e) {
                                $("#dvPreview img").attr("src", e.target.result);
                            }
                            reader.readAsDataURL($(this)[0].files[0]);
                            var img = $("#fileupload").get(0);
                            var files = img.files;
                            var data = new FormData();
                            for (var i = 0; i < files.length; i++) {
                                data.append(files[i].name, files[i]);
                            }
                            $.ajax({
                                type: 'POST',
                                data: data,
                                url: "Handler.ashx",
                                cache: false,
                                contentType: false,
                                processData: false,
                                success: function (r) {
                                    alert(r.d);
                                },
                                error: function (r) {
                                    alert(r.d);
                                }
                            });
                        } else {
                            alert("This browser does not support FileReader.");
                        }
                    }
                } else {
                    alert("Please upload a valid image file.");
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="fileupload" type="file" />
        <hr />
        <b>Live Preview</b><br /><br />
        <div id="dvPreview"></div>
    </div>
    </form>
</body>
</html>

Code

C#

HandlerCS.ashx

public void ProcessRequest(HttpContext context)
{
    if (context.Request.Files.Count > 0)
    {
        HttpPostedFile postedFile = context.Request.Files[0];
        string folderPath = context.Server.MapPath("~/Uploads/");
        string fileName = System.IO.Path.GetFileName(postedFile.FileName);
        postedFile.SaveAs(folderPath + fileName);
        string filPath = folderPath + fileName;
        string constr = System.Configuration.ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (System.Data.SqlClient.SqlConnection con = new System.Data.SqlClient.SqlConnection(constr))
        {
            using (System.Data.SqlClient.SqlCommand cmd = new System.Data.SqlClient.SqlCommand("INSERT INTO tblfilePath VALUE(@Path)", con))
            {
                cmd.Parameters.AddWithValue("@Path", filPath);
                con.Open();
                cmd.ExecuteNonQuery();
                con.Close();
            }
        }
    }
}

public bool IsReusable
{
    get
    {
        return false;
    }
}

VB.Net

HandlerVB.ashx

Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
    If context.Request.Files.Count > 0 Then
        Dim postedFile As HttpPostedFile = context.Request.Files(0)
        Dim folderPath As String = context.Server.MapPath("~/Uploads/")
        Dim fileName As String = System.IO.Path.GetFileName(postedFile.FileName)
        postedFile.SaveAs(folderPath & fileName)
        Dim filPath As String = folderPath & fileName
        Dim constr As String = System.Configuration.ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using con As System.Data.SqlClient.SqlConnection = New System.Data.SqlClient.SqlConnection(constr)
            Using cmd As System.Data.SqlClient.SqlCommand = New System.Data.SqlClient.SqlCommand("INSERT INTO tblfilePath VALUE(@Path)", con)
                cmd.Parameters.AddWithValue("@Path", filPath)
                con.Open()
                cmd.ExecuteNonQuery()
                con.Close()
            End Using
        End Using
    End If
End Sub

Public ReadOnly Property IsReusable As Boolean
    Get
        Return False
    End Get
End Property

Screenshot