Skip to main content

Preview & uploading Image file using jquery with generic handler ashx without Postback

Preview & upload Image file using jquery with generic handler ashx without postback


Step 1 : UploadImage.htm

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>uploading file using jquery with generic handler ashx</title>
    <script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btnUpload').click(function () {
                var fileUpload = $("#FileUpload1").get(0);
                var files = fileUpload.files;
                var test = new FormData();
                for (var i = 0; i < files.length; i++) {
                    test.append(files[i].name, files[i]);
                }
                $.ajax({
                    url: "UploadHandler.ashx",
                    type: "POST",
                    contentType: false,
                    processData: false,
                    data: test,
                    success: function (result) {
                        alert(result);
                    },
                    error: function (err) {
                        alert(err.statusText);
                    }
                });
            });
        })

        function showimagepreview(input) {

            if (input.files && input.files[0]) {
                var filerdr = new FileReader();
                filerdr.onload = function (e) {
                    $('#imgprvw').attr('src', e.target.result);
                }
                filerdr.readAsDataURL(input.files[0]);
                $('#imgprvw').show();
            }
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="file" id="FileUpload1" onchange="showimagepreview(this)" />
        <input type="button" id="btnUpload" value="Upload Files" />
    </div>
    <img id="imgprvw" alt="uploaded image preview" width="200px" height="200px" style="display: none" />
    </form>
</body>
</html>

Step 2 : UploadHandler.ashx

<%@ WebHandler Language="C#" Class="UploadHandler" %>

using System;
using System.Web;
using System.IO;

public class UploadHandler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        if (context.Request.Files.Count > 0)
        {
            HttpFileCollection files = context.Request.Files;
            for (int i = 0; i < files.Count; i++)
            {
                HttpPostedFile file = files[i];
                string fname;
                if (HttpContext.Current.Request.Browser.Browser.ToUpper() == "IE" || HttpContext.Current.Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER")
                {
                    string[] testfiles = file.FileName.Split(new char[] { '\\' });
                    fname = testfiles[testfiles.Length - 1];
                }
                else
                {
                    fname = file.FileName;
                }
                fname = Path.Combine(context.Server.MapPath("~/uploads/"), fname);
                file.SaveAs(fname);
            }
        }
        context.Response.ContentType = "text/plain";
        context.Response.Write("File Uploaded Successfully!");
    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}




Labels:

Comments

Post a Comment

Popular posts from this blog

PNR Status by web Scraping Method (ASP.NET) C#

To Get the PNR Status by web Scraping Method Steps to Execute the Function Step 1 : Add the below method in your Form and Pass the PNR Number arguement public string GetPNRStatus( string sPNR) { string URI = "http://www.indianrail.gov.in/cgi_bin/inet_pnrstat_cgi.cgi" ; string Parameters = Uri .EscapeUriString( "lccp_pnrno1=" +sPNR+ "&amp;submitpnr=Get Status" ); System.Net. HttpWebRequest req = ( HttpWebRequest )System.Net. WebRequest .Create(URI); //HTTP POST Headers req.ContentType = "application/x-www-form-urlencoded" ; req.Host = "www.indianrail.gov.in" ; //You can use your own user-agent. req.UserAgent = "Mozilla/5.0 (compatible; MSIE 7.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0) DELL;Venue Pro" ; req.Headers.Add( HttpRequestHeader .AcceptLanguage, "en-us,en;q=0.5" ); req.Headers.Add( HttpRequestHeader .AcceptCharset, "ISO-8859-1,utf-8;q=...
20 comments
Read more

SonarQube Configuration For .NET Core Web API

When multiple developers are working on the same project, it's good to have a code review. SonarQube is a tool through which we can evaluate our code. Here, for demo purposes, we are going to evaluate the web API which is built on .NET Core. Let's see step by step implementation. In order to run SonarQube, we need to install JAVA in our local system.   Refer to the below link to download JAVA installer and install JAVA. https://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html Configure the 'PATH' system variable under environment variables Go to Control Panel > System > Advanced System Settings, it will open the System Properties window. Click on the "Environment Variables" button. Click on the "View" button under User Variables. Give the variable name as 'JAVA_HOME'. The variable value will be your JDK path where you installed JAVA. Select path variable under system variable and click o...
Post a Comment
Read more

Automate Git Commands Across Repos Using Batch Scripts

  Writing Scripts to Apply Commands Across Repositories I store all of my local repositories in a particular directory. I wrote these scripts to automate one or more git commands to run on each repository within that directory. It could also be used to do a general clean-up before committing anything to your repository. Here are two ways to do it. Method 1: Use this when you want to store commands in a single file to be executed in sequence for every repo in your directory. 1 @echo off 2 ​ 3 for /d %%i in (%cd%\*) do ( 4 echo ************************************************************************* 5 ​ 6 echo "%%i" 7 cd "%%i" 8 ​ 9 echo ----------------------------------------- 10 echo status 11 git status 12 echo ----------------------------------------- 13 ​ 14 echo ************************************************************************* 15 ) 16 ​ 17 cd .. 18 ​ The script is simple: It’s composed of a single for loop. W...
Post a Comment
Read more