简体   繁体   English

Ajax文件上传器.Net

[英]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: 需要注意的几点:

  • I faced some problem when i tried to make FileUpload.aspx inherit from a MasterPage. 当我尝试使FileUpload.aspx从MasterPage继承时遇到了一些问题。
  • You might use the same 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. 我没有尝试过,但是我认为有可能。
  • Instead of using a 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. 再一次,我没有尝试过,但是认为可能。
  • you need to use jquery 1.8.3 or lower for this as $.browser is not available in upper versions. 您需要为此使用jquery 1.8.3或更低版本,因为$.browser在更高版本中不可用。 or you can edit the code to make it work with latest version of jquery. 或者您可以编辑代码以使其与最新版本的jquery一起使用。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM