I've found plenty of links for a file up loader like this one [here][1]
But they all require a php file to move the file. What i want is to use ajax to pass the file to an asp handler or even to a web service so that i can then encode it to a byte[] and insert it into a database.
Anyone with any ideas how this could be done?
I have used jquery.form.js plugin to upload large files to server in ASP.NET.
FileUpload.aspx
<html>
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.form.js"></script>
<style type="text/css">
form#upForm
{
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: #B4F5B4;
width: 0%;
height: 20px;
border-radius: 3px;
}
.percent
{
position: absolute;
display: inline-block;
top: 3px;
left: 48%;
}
</style>
</head>
<body>
<h3>File Uploading</h3>
<form id="upForm" action="UploadHandler.aspx" method="post" enctype="multipart/form-data">
<input type="file" name="myfile" /><br />
<input type="submit" value="Upload File to Server" />
</form>
<div class="progress">
<div class="bar"></div>
<div class="percent">0%</div>
</div>
<div id="status"></div>
<script>
(function () {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
if ($.browser.msie ||
($.browser.mozilla && $.browser.version.slice(0, 3) < 2))
$(".progress").hide();
$('form#upForm').ajaxForm({
beforeSend: function () {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
if ($.browser.msie ||
($.browser.mozilla && $.browser.version.slice(0, 1) < 2))
status.html("uploading....");
},
uploadProgress: function (event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function (xhr) {
status.html(xhr.responseText);
},
resetForm: true
});
})();
</script>
</body>
</html>
UploadHandler.aspx.cs
using System;
using System.Web;
public partial class UploadHandler : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.Clear();
HttpFileCollection hfc = Request.Files;
HttpPostedFile hpf = hfc[0];
string filename = hpf.FileName;
string folderLoc = @"d:\foldername";
if (hpf.ContentLength > 0)
hpf.SaveAs((folderLoc) + @"\" + filename);
Response.AddHeader("Content-type", "text/html");
Response.Write("The file " + filename + " is successfully uploaded");
}
}
some points to be noted:
FileUpload.aspx inherit from a MasterPage.Fileupload.aspx pages code behind instead of using a separate Uploadhandler.aspx file. I haven't tried that, but i think it's possible.aspx page you can also try to use a generic handler page. Again, I haven't tried that but think might it's possible.$.browser is not available in upper versions. or you can edit the code to make it work with latest version of jquery.