Dot net devloper: Multiple Image Upload In One Time example in ASP.NET

Introduction:

I will explain how to upload multiple files in asp.net using uploadify plugin in JQuery.

Description:

We can implement this concept by using uploadify plugin with few simple steps.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="New_uploadphoto.aspx.vb" Inherits="New_uploadphoto" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Photo Upload</title>

$(function() {

$('#file_upload').uploadify({

'removeCompleted' : false,

'fileTypeDesc' : 'Image Files',

'fileTypeExts' : '*.gif; *.jpg; *.png',

'buttonText':'SELECT PHOTOS',

'swf' : '../UploadMultiPhoto/uploadify.swf',

'uploader' : '../UploadMultiPhoto/handler.ashx?UserID=<%= CommonClass.EncryptText(CommonClass.getCustomerID()) %>&Album=<%= CommonClass.EncryptText(ViewState("AlbumName"))%>',

'onUploadSuccess' : function(file, data, response) {

var dat = $.parseJSON(data);

var str='<div style="width: 320px;">'+

'<div class="floatL" style="position:relative;">' +

'<div class="floatL" style="width:320px;">' +

'<center><img class="test' + dat[0]["PhotoNo"] + '" src="' + dat[0]["path"] + '"></center>' +

'</div>' +

'<div class="floatL" style="margin-top: -15px;">' +

'<div class="floatL" style="width: 250px;">' +

'Photo Description:</div>' +

'<div style="margin-top:4px; float:Left;"><textarea onchange=SavePhotoDes(this.value,"' + dat[0]["PhotoNo"] + '") style="width:310px"></textarea></div>' +

'</div>' +

'</div>'

$('#'+file.id).html(str)

$('#lnkUploadPhoto').show();

$('#lnkCancel').show();

BindTag(dat[0]["PhotoNo"])

}

});

var availableTags;

function SavePhotoDes(a,b){

$.ajax({

url: "JSONData.aspx?mode=34",

dataType: "JSON",

data:{PhotoNumber:b,Value:a,AlbumName:'<%= CommonClass.EncryptText(ViewState("AlbumName")) %>'},

success: function (data) {

}

});

}

function BindTag(no){

$('.test' + no).jQueryNotes({

minWidth: 20,

minHeight: 20,

aspectRatio: true,

helper: 'helper-class',

allowLink: false,

dateFormat: 'D.M.Y',

operator: '../Customer/JSONData.aspx?mode=16&albumid=<%=ViewState("albumid") %>&PhotoID=' +no ,

allowEdit: false,

allowAdd: true,

allowAuthor: false,

allowDelete: false

});

$.ajax({

url: "JSONData.aspx?mode=17",

dataType: "JSON",

data:{albumid:'<%=ViewState("albumid") %>',frdid:0},

success: function (data) {

availableTags = data;

}

});

}

</script>

.uploadify-queue-item{

margin-right:2px;

float:left;

width:310px;

}

.uploadify-queue-item .cancel a{

background:url("uploadify-cancel.png");

}

.submitBtn {

background: none repeat scroll 0 0 #EAEAEA;

border: 1px solid #C3C2C2;

color: #666666;

font-size: 11px;

padding: 2px 10px 3px;

text-align: center;

}

.ui-menu .ui-menu-item

{

width: 146px;

}

.ui-menu .ui-menu-item a

{

font-family: Tahoma,Verdana,Arial,sans-serif;

font-size: 12px;

line-height: 1;

}

.ui-autocomplete

{

max-height: 100px; /*height: 200px;*/

overflow-y: auto;

overflow-x: hidden;

background-color: #fff;

}

</style>

</head>

<body>

<div class="floatL" style="position:absolute; top:11px; left:140px; font-size:11px;">Double click on the images to tag friends</div>

</div>

<asp:LinkButton ID="lnkUploadPhoto" runat="server" style="display:none;">

<div style="font-size:10px; margin:15px 0 0 82%;" class="floatL submitBtn"><b>Upload Photos</b></div>

</asp:LinkButton>

<asp:LinkButton ID="lnkCancel" runat="server" PostBackUrl="../Customer/AlbumList.aspx" style="display:none;">

<div style="font-size:10px; margin:15px 0 0 1%;" class="floatL submitBtn"><b>Cancel</b></div>

</asp:LinkButton>

</div>

</div>

</form>

</body>

</html>

If you observe above code in header section I added some of css and script files those files you can get it from attached folder or you can get it from here uploadify plugin and if you observe in uploadify function I used Handler.ashx in this we will write the code to upload files in folder for that Right click on your application >> Select Add New Item >> Select Generic Handler file and Give name as Handler.ashx >> Click OK

Open Handler.ashx file and write the following code

VB.NET Code:

<%@ WebHandler Language="VB" Class="Handler" %>

Imports System

Imports System.Web

Imports System.IO

Imports System.Web.Mail

Imports System.Web.SessionState

Public Class Handler : Implements IHttpHandler, IReadOnlySessionState

Private ReadOnly js As New Script.Serialization.JavaScriptSerializer()

Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest

'context.Response.AddHeader("Pragma", "no-cache")

'context.Response.AddHeader("Cache-Control", "private, no-cache")

HandleMethod(context)

End Sub

Public Sub HandleMethod(ByVal context As HttpContext)

Select Case context.Request.HttpMethod

Case "POST"

UploadFile(context)

End Select

End Sub

Private Shared Function GivenFilename(ByVal context As HttpContext) As Boolean

Return Not String.IsNullOrEmpty(context.Request("f"))

End Function

Public Sub UploadFile(ByVal context As HttpContext)

If context.Request.Files.Count > 0 Then

Dim files As HttpPostedFile = context.Request.Files(0)

Dim AlbumNAme As String = CommonClass.DecryptText(context.Request.QueryString("album"))

Dim USerID As String = CommonClass.DecryptText(context.Request.QueryString("UserID"))

Dim galleryPath As String = ChasingCart.Common.ImagePathAlbumImagePhotoShare & USerID & "/" & AlbumNAme & "/"

If Not Directory.Exists(galleryPath) Then

Directory.CreateDirectory(galleryPath)

End If

Dim xmlDoc As New System.Xml.XmlDocument()

Dim xmlnode As Xml.XmlNodeList

If File.Exists(galleryPath & "Descriptions.xml") Then

xmlDoc.Load(galleryPath & "Descriptions.xml")

Else

xmlDoc.AppendChild(xmlDoc.CreateElement("files"))

End If

xmlnode = xmlDoc.SelectNodes("files/file")

Dim fileName As String = GetSafeFileName(galleryPath,files.FileName)

fileName = fileName.Replace(" ", "")

If Not Directory.Exists(galleryPath & "/Temp/") Then

Directory.CreateDirectory(galleryPath & "/Temp/")

End If

Dim TempxmlDoc As New System.Xml.XmlDocument()

If File.Exists(galleryPath & "/Temp/" & "Descriptions.xml") Then

TempxmlDoc.Load(galleryPath & "/Temp/" & "Descriptions.xml")

Else

TempxmlDoc.AppendChild(TempxmlDoc.CreateElement("files"))

End If

Dim Tempxmlnode As Xml.XmlNodeList = TempxmlDoc.SelectNodes("files/file")

Dim str As Integer = 0

If File.Exists(galleryPath & "/Temp/" & "Descriptions.xml") Then

For Each objN As Xml.XmlNode In Tempxmlnode

If objN.Attributes("seqno").Value > str Then

str = objN.Attributes("seqno").Value

End If

Else

For Each objN As Xml.XmlNode In xmlnode

If objN.Attributes("seqno").Value > str Then

str = objN.Attributes("seqno").Value

End If

Dim xmlFile As System.Xml.XmlElement = TempxmlDoc.CreateElement("file")

xmlFile.SetAttribute("path", fileName)

xmlFile.SetAttribute("seqno", str + 1)

xmlFile.SetAttribute("mycomments", "")

xmlFile.SetAttribute("sno", str + 1)

TempxmlDoc.DocumentElement.AppendChild(xmlFile)

TempxmlDoc.Save(galleryPath & "/Temp/" & "Descriptions.xml")

files.SaveAs(galleryPath & "/Temp/" & fileName)

'context.Response.ContentType = "text/plain"

'Dim serializer = New System.Web.Script.Serialization.JavaScriptSerializer()

Dim result = files.FileName

context.Response.ContentType = "json"

context.Response.Write("[{""path"":""" & ChasingCart.Common.ImageUrlMemberImage & "getImage.aspx?t=bigthumbnail&u=" & CommonClass.EncryptText(USerID) & "&a=" & CommonClass.EncryptText(AlbumNAme) & "&f=" & fileName & """,""PhotoNo"":""" & str + 1 & """}]")

'context.Response.Write(serializer.Serializer(result))

End If

End Sub

Private Function GetSafeFileName(ByVal path As String,ByVal fileName As String) As String

Dim newFileName As String = fileName.Replace(" ", "")

if newFileName.Length>40 Then

newFileName =newFileName.Substring(0,40)

End if

Try

While (File.Exists(path & newFileName))

Dim RandNum As New System.Random()

Dim MyRandomNumber As Integer = RandNum.Next(100)

newFileName = MyRandomNumber & "_" & fileName

End While

Catch ex As Exception

End Try

Return newFileName

End Function

Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable

Get

Return False

End Get

End Property

End Class

Will Show on Your Page after That when you Click on Save button Than all Image Will Save
write Below code to Save Image in Your .vb File on Click Event of Save button

Protected Sub lnkUploadPhoto_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lnkUploadPhoto.Click

objMgr.objErr.FunctionName.Add("lnkUploadPhoto_Click")

Try

Dim galleryPath As String = ChasingCart.Common.ImagePathAlbumImagePhotoShare & CommonClass.getCustomerId & "/" & ViewState("AlbumName").ToString() & "/Temp/"

Dim galleryPathDest As String = ChasingCart.Common.ImagePathAlbumImagePhotoShare & CommonClass.getCustomerId & "/" & ViewState("AlbumName").ToString() & "/"

Dim xmlDoc As New Xml.XmlDocument

Dim xmlnode As Xml.XmlNodeList

Dim ds As New DataSet

Dim dt1 As New DataSet

If File.Exists(galleryPath & "/" & "Descriptions.xml") Then

xmlDoc.Load(galleryPath & "/" & "Descriptions.xml")

dt1.ReadXml(galleryPath & "/" & "Descriptions.xml")

Else

xmlDoc.AppendChild(xmlDoc.CreateElement("files"))

End If

xmlnode = xmlDoc.SelectNodes("files/file")

Dim di As DirectoryInfo = New DirectoryInfo(galleryPathDest)

If Not di.Exists Then

di.Create()

End If

Dim descriptionsDest As New Xml.XmlDocument

If File.Exists(galleryPathDest & "/Descriptions.xml") Then

ds.ReadXml(galleryPathDest & "/Descriptions.xml")

End If

For Each FileName As String In Directory.GetFiles(galleryPath)

Dim index1 As Integer = FileName.LastIndexOf("/")

Dim name2 As String = FileName.Remove(0, index1 + 1)

If Not name2.Contains(".xml") Then

File.Copy(galleryPath & name2, galleryPathDest & name2, True)

File.Delete(galleryPath & name2)

End If

dt1.Merge(ds)

Dim dv As New DataView(dt1.Tables(0))

dv.Sort = "seqno"

Dim dt As DataTable = dv.ToTable

Dim node As Xml.XmlNode

If File.Exists(galleryPathDest & "Descriptions.xml") Then

descriptionsDest.Load(galleryPathDest & "Descriptions.xml")

node = descriptionsDest.SelectSingleNode("//files")

node.ParentNode.RemoveChild(node)

descriptionsDest.AppendChild(descriptionsDest.CreateElement("files"))

Else

descriptionsDest.AppendChild(descriptionsDest.CreateElement("files"))

End If

For i As Integer = 0 To dt.Rows.Count - 1

Dim xmlFile As System.Xml.XmlElement = descriptionsDest.CreateElement("file")

Dim xmlnode1 As Xml.XmlNodeList = descriptionsDest.GetElementsByTagName("file")

xmlFile.SetAttribute("path", dt.Rows(i)(0).ToString())

xmlFile.SetAttribute("seqno", dt.Rows(i)(1).ToString())

xmlFile.SetAttribute("mycomments", dt.Rows(i)(2).ToString())

xmlFile.SetAttribute("sno", dt.Rows(i)(3).ToString())

descriptionsDest.DocumentElement.AppendChild(xmlFile)

descriptionsDest.Save(galleryPathDest & "Descriptions.xml")

descriptionsDest.Load(galleryPathDest & "Descriptions.xml")

objMgr.objErr.FunctionName.RemoveAt(objMgr.objErr.FunctionName.Count - 1)

Catch ex As Exception

'handle exceptions

objMgr.objErr.Exp = ex

objMgr.objErr.HandleException()

Finally

End Try

End Sub

Dot net devloper

Tuesday, June 18, 2013

Multiple Image Upload In One Time example in ASP.NET

No comments:

Post a Comment