Getting Started with Adobe After Effects - Part 6: Motion Blur


Upload Image Close it
Select File

Browse by Tags · View All
BRH 48
#DOTNET 34
#ASP.NET 29
jQuery 22
ASP.NET 20
.NET 20
WPF 9
jquery interview questions 9
jquery faq 8
ASP.NET4 8

Archive · View All
February 2011 10
September 2011 4
August 2011 4
July 2011 4
May 2011 4
April 2011 4
March 2011 4
October 2011 4
June 2011 4
January 2011 4

File Upload using jQuery

Aug 20 2011 6:04PM by Hima   

Use case:  To upload the file from client system and save the file in Server  using File Stream 

Implementation: This can be done at the client side by using jQuery with the help of  uploadify.js plugin 

1. Designing the Page

Drag and drop Fileupload control, hidden Field, also need hyderlink or button control for the upload.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UploadJs.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Uploadify Example for .NET</title>
    <link rel="Stylesheet" type="text/css" href="CSS/uploadify.css" />

    <script type="text/javascript" src="Scripts/jquery-latest.js"></script>

    <script type="text/javascript" src="Scripts/jquery.uploadify.js"></script>

    <script type="text/javascript">
        $(window).load(
    function() 
    {
        $("#<%=fleUpload.ClientID%>").fileUpload(
        {
            'uploader': 'scripts/uploader.swf',
            'cancelImg': 'images/cancel.png',
            'buttonText': 'Browse Files',
            'script': 'Upload.ashx',
            'folder': 'uploads',

            'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
            'multi': false,
            'auto': false,
            'onComplete': function(event, queueID, fileObj, response, data) {

            document.getElementById('<%=hdnField.ClientID %>').value = response;
          }
     });
    }
);
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:HiddenField ID="hdnField" runat="server" />
    <div id="divsd">
        <table>
            <tr>
                <td>
                    <asp:FileUpload ID="fleUpload" runat="server" /><br />
                </td>
                <td>
                    <a id="a1" href="#" onclick="$('#<%=fleUpload.ClientID%>').fileUploadStart()">Upload</a>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

2. Implement the handler.

Notice that we are calling handler upload.ashx at the client side on window.load event, so we need to implement the handler to support , save uploaded file on the server. The following is code for that.

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

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

public class Upload : IHttpHandler
{

    UploadToDB Fileupload = new UploadToDB();
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        context.Response.Expires = -1;
        try
        {
            HttpPostedFile postedFile = context.Request.Files["Filedata"];

            string savepath = "";
            string tempPath = "";

            tempPath = context.Request["folder"];

            //If you prefer to use web.config for folder path, uncomment below line:
            //tempPath = System.Configuration.ConfigurationManager.AppSettings["FolderPath"]; 


            savepath = context.Server.MapPath(tempPath);
            string filename = postedFile.FileName;
            if (!Directory.Exists(savepath))
                Directory.CreateDirectory(savepath);


            postedFile.SaveAs(savepath + @"\" + filename);
      Fileupload.UploadToDatabase(savepath + @"\" + filename); // implement logic to upload to database. Save file path in database
            context.Response.Write(filename);
            context.Response.StatusCode = 200;

        }
        catch (Exception ex)
        {
            context.Response.Write("Error: " + ex.Message);
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}
Handler logic is self explanatory this is normal code to save file in file directory. If the directory do not exists it creates folder and saves the files.

3.Implement class UploadtoDatabase

public class UploadToDB
{
    public UploadToDB()
    {
        //
        // TODO: Add constructor logic here
        //
    }
    public int UploadToDatabase(string filename)
    {
        return Convert.ToInt32(SqlHelper.ExecuteNonQuery(ConfigurationSettings.AppSettings["conString"], "SP_Uplaodfile", new object[] {filename }));
    }
}
Thats it . Now our Web page is ready to upload and store the files Note: Make sure that you give write permissions to the Folder on the server. Allow ASP.Net user to access the folder. Do not make the Folder as readonly.

Tags: .NET, #DOTNET, #ASP.NET, ASP.NET, jQuery,


Hima
31 · 6% · 1776
2
 
0
Lifesaver
 
0
Refreshed
 
0
Learned
 
0
Incorrect



Submit

Your Comment


Sign Up or Login to post a comment.

"File Upload using jQuery" rated 5 out of 5 by 2 readers
File Upload using jQuery , 5.0 out of 5 based on 2 ratings
    Copyright © Rivera Informatic Private Ltd Contact us      Privacy Policy      Terms of use      Report Abuse      Advertising      [ZULU1097]