Ajax File Uploader .Net

时间:2013-10-23 16:34:49

标签: asp.net ajax

我找到了大量的文件加载器链接,就像这个[这里] [1]

但他们都需要一个php文件来移动文件。我想要的是使用ajax将文件传递给asp处理程序甚至Web服务,以便我可以将其编码为byte []并将其插入数据库。

任何有任何想法的人如何做到这一点?

1 个答案:

答案 0 :(得分:0)

我使用jquery.form.js插件将大文件上传到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");
    }
}

需要注意的一些要点:

  • 当我试图让FileUpload.aspx从MasterPage继承时,我遇到了一些问题。
  • 您可以使用相同的Fileupload.aspx页面代码,而不是使用单独的Uploadhandler.aspx文件。我没试过,但我认为这是可能的。
  • 您也可以尝试使用aspx页面,而不是使用generic handler页面。同样,我没有尝试过,但想想可能是可能的。
  • 您需要使用jquery 1.8.3或更低版本,因为$.browser在较高版本中不可用。或者您可以编辑代码以使其与最新版本的jquery一起使用。