[英]Ajax File Uploader .Net
I've found plenty of links for a file up loader like this one [here][1] 我已经找到了很多类似这样的文件加载器的链接[这里] [1]
But they all require a php file to move the file. 但是它们都需要一个php文件来移动文件。 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.
我想要的是使用Ajax将文件传递给ASP处理程序甚至Web服务,以便我可以将其编码为byte []并将其插入数据库。
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. 我已经使用jquery.form.js插件将大文件上传到ASP.NET中的服务器。
FileUpload.aspx 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 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
从MasterPage继承时遇到了一些问题。 Fileupload.aspx
pages code behind instead of using a separate Uploadhandler.aspx
file. Fileupload.aspx
页面代码,而不是使用单独的Uploadhandler.aspx
文件。 I haven't tried that, but i think it's possible. aspx
page you can also try to use a generic handler
page. aspx
页面,您还可以尝试使用generic handler
页面。 Again, I haven't tried that but think might it's possible. $.browser
is not available in upper versions. $.browser
在更高版本中不可用。 or you can edit the code to make it work with latest version of jquery.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.