Drag and Drop multiple File upload using jQuery AJAX in ASP.Net using C# and VB.Net
Multiple files such as Image, PDF, Word, Excel, etc. and also large Music and Video files such as MP3 and MP4 will be easily uploaded by simple Drag and Drop of files in HTML5 supported browsers using jQuery and AJAX in ASP.Net.
This article makes use of the jQuery FileDrop plugin which makes use of Generic HTTP Handlers for uploading files with Drag and Drop using jQuery and AJAX in ASP.Net.
In this article I will explain with an example, how to upload multiple files with Drag and Drop in HTML5 supported browsers using jQuery and AJAX in ASP.Net using C# and VB.Net.
Multiple files such as Image, PDF, Word, Excel, etc. and also large Music and Video files such as MP3 and MP4 will be easily uploaded by simple Drag and Drop of files in HTML5 supported browsers using jQuery and AJAX in ASP.Net.
This article makes use of the jQuery FileDrop plugin which makes use of Generic HTTP Handlers for uploading files with Drag and Drop using jQuery and AJAX in ASP.Net.
Generic HTTP Handler
Following is the Generic HTTP Handler which will handle the files sent from the AngularJS client for upload.
It first loops through the Request.Files collections and then inside the loop, each file is saved in the folder named Uploads.
Finally a success response is sent back to the jQuery client.
C#
<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
using System.IO;
public class Handler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
foreach (string key in context.Request.Files)
{
HttpPostedFile postedFile = context.Request.Files[key];
string folderPath = context.Server.MapPath("~/Uploads/");
if (!Directory.Exists(folderPath))
{
Directory.CreateDirectory(folderPath);
}
postedFile.SaveAs(folderPath + postedFile.FileName);
}
context.Response.StatusCode = 200;
context.Response.ContentType = "text/plain";
context.Response.Write("Success");
}
public bool IsReusable
{
get
{
return false;
}
}
}
Drag and Drop multiple File upload using jQuery AJAX in ASP.Net
The HTML Markup consists of two HTML DIV elements and a Button. One DIV will be the area for dropping files and the other will display the list of uploaded files.
Configuring the Plugin
The jQuery FileDrop plugin has been applied to the dropSection DIV and the Button ID is set into the fallback_id property of the jQuery FileDrop plugin.
Plugin properties
url – URL of the Generic Handler.
paramname – Name of the parameter which will contain the File data in Request.Form collection. Not required when Generic Handler is used.
maxfiles – Maximum number of simultaneous upload of Files.
maxfilesize – Maximum allowed File size in MB.
Plugin events
dragOver – Raised when File is dragged into the Drop section.
dragLeave – Raised when the File of dragged out of the Drop section.
drop – Raised when the File is dragged and dropped.
uploadFinished – Raised when the upload of a file is completed.
afterAll – Raised when upload of all files dragged together are completed.
Plugin validations
allowedfileextensions – Only the Files with the specified extension will be allowed to be uploaded.
allowedfiletypes – Only the Files with the specified MIME type (Content Type) will be allowed to be uploaded.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
#dropSection
{
height: 300px;
width: 600px;
background-color: skyblue;
}
#btnUpload
{
display: none;
}
.active
{
background-color: yellow !important;
}
</style>
</head>
<body>
<div id="dropSection">
</div>
<br />
Uploaded Files:
<hr />
<div id="uploadedFiles">
</div>
<input type="button" id="btnUpload" value="Upload" />
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script src="Scripts/filedrop.js"></script>
<script type="text/javascript">
$(function () {
$("#dropSection").filedrop({
fallback_id: 'btnUpload',
fallback_dropzoneClick: true,
url: '<%=ResolveUrl("~/Handler.ashx")%>',
//allowedfiletypes: ['image/jpeg', 'image/png', 'image/gif', 'application/pdf', 'application/doc'],
allowedfileextensions: ['.doc', '.docx', '.pdf', '.jpg', '.jpeg', '.png', '.gif'],
paramname: 'fileData',
maxfiles: 5, //Maximum Number of Files allowed at a time.
maxfilesize: 2, //Maximum File Size in MB.
dragOver: function () {
$('#dropSection').addClass('active');
},
dragLeave: function () {
$('#dropSection').removeClass('active');
},
drop: function () {
$('#dropSection').removeClass('active');
},
uploadFinished: function (i, file, response, time) {
$('#uploadedFiles').append(file.name + '<br />')
},
afterAll: function (e) {
//To do some task after all uploads done.
}
})
})
</script>
</body>
</html>
https://totemnetwork.blogspot.com/2021/07/25-best-free-online-education-sites.html ncert solutions class
ReplyDelete