normal_fileupload.aspx
------------------------------------------
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
body {
padding: 30px;
}
form {
display: block;
margin: 20px auto;
background: #eee;
border-radius: 10px;
padding: 15px;
}
.progress {
position: relative;
width: 400px;
border: 1px solid #ddd;
padding: 1px;
border-radius: 3px;
}
.bar {
background-color: #3599fa;
width: 0%;
height: 20px;
border-radius: 3px;
}
.percent {
position: absolute;
display: inline-block;
top: 0px;
left: 48%;
;
font-family: 'Open Sans';
}
</style>
<body>
<form id="Form1" action="Upload.ashx" method="post" enctype="multipart/form-data" runat="server">
<input id="test_title" type="text" placeholder="Title" />
<select id="category" class="droplist_style4">
<option id="C" value="C">-Select-</option>
<option id="M" value="Ministry Testimony">Ministry Testimony</option>
<option id="P" value="Personal Testimony">Personal Testimony</option>
<option id="F" value="Family Testimony">Family Testimony</option>
<option id="O" value="Others Testimony">Others Testimony</option>
<option id="W" value="Worship video Song">Worship video Song</option>
<option id="ME" value="Church Message">Church Message</option>
</select>
<input type="file" name="myfile[]" multiple=""><br>
<input type="submit" value="Upload File to Server">
<asp:Label ID="user_lbl" runat="server" Text="akash"></asp:Label>
</form>
<div class="progress">
<div class="bar" style="width: 100%;"></div>
<div class="percent">0%</div>
</div>
<div id="status"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
function validate(formData, jqForm, options) {
if ($("#test_title").val() == "") {
alert('Please enter a value for title');
return false;
}
if ($("#category").val() == "C") {
alert('Please select Category');
return false;
}
for (var i = 0; i < formData.length; i++) {
if (!formData[i].value) {
alert('Please select file');
return false;
}
else {
}
}
//alert('Both fields contain values.');
}
(function () {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('.bar').width(0);
$('form').ajaxForm({
requiredFields: ["title_text"],
beforeSubmit: validate,
contentType: "application/json; charset=utf-8",
data: { 'Id': '10000', 'title': $("#title_text").val() },
dataType: "json",
beforeSend: function (data) {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function (event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
//console.log(percentVal, position, total);
},
success: function (data) {
var percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
$("#status").html(data);
alert(data);
},
complete: function (xhr) {
status.html(xhr.responseText);
},
beforeSerialize: function (form, options) {
options.data = {
user: $("#<%=user_lbl.ClientID%>").text(),
video_name: $("#test_title").val(),
category: $("#category").val(),
B: true
};
}
});
})();
</script>
</body>
Upload.ashx
----------------
<%@ WebHandler Language="C#" Class="Upload" %>
using System;
using System.Web;
using System.IO;
public class Upload2 : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
HttpPostedFile file = null;
if (context.Request.Files.Count > 0)
{
file = context.Request.Files[0];
file.SaveAs(HttpContext.Current.Server.MapPath("~/videos/") + file.FileName);
Stream streamfile = file.InputStream;
string id = context.Request["Id"];
string user = context.Request["user"];
string video_name = context.Request["video_name"];
string category = context.Request["category"];
//string id = "akash";
string extension;
string filename = file.FileName;
extension = Path.GetExtension(filename);
context.Response.Write( " File name : " + filename + "</br>" + " Category : " + category + "</br>" + " video name:" + video_name + "</br>" + " user:" + user);
}
}
public bool IsReusable {
get {
return false;
}
}
}
web.config
--------------
<system.web>
<httpRuntime maxRequestLength="1048576" executionTimeout="99999" />
<compilation targetFramework="4.0" defaultLanguage="c#" />
<customErrors mode="Off" />
<sessionState timeout="120" />
</system.web>
<location path="Upload.ashx" >
<system.web>
<authorization>
<allow users="*" />
</authorization>
</system.web>
</location>
<appSettings>
<add key="FolderPath" value="videos" />
</appSettings>
<system.webServer>
<httpErrors existingResponse="PassThrough" />
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="1073741824" />
</requestFiltering>
</security>
<validation validateIntegratedModeConfiguration="false" />
</system.webServer>
