【问题标题】:using Plupload with ASP.NET/C#通过 ASP.NET/C# 使用 Plupload
【发布时间】:2010-12-03 23:01:02
【问题描述】:

更新

我能够让一切正常工作,我只想发回更新的代码。我使用了 Darin Dimitrov 的建议,即使用单独的通用 http 处理程序来处理文件上传,所以这是我为此提出的代码......如果您有任何问题,请告诉我。

<%@ WebHandler Language="C#" Class="Upload" %>

using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.IO;
using System.Net;
using System.Web;

public class Upload : IHttpHandler {

    public void ProcessRequest(HttpContext context) {

        /**
         * If 'newTicket' is "false", then the directory to upload to already exists and we can extract it from
         * the 'ticketID' POST parameter.
         * 
         * If 'newTicket' is "true", then this is a new Ticket submission so we need to work with a NEW directory 
         * on the server, so the ID needs to be 1 more than the total number of directories in ~/TicketUploads/
         */
        String newTicket = context.Request["newTicket"] != null ? context.Request["newTicket"] : String.Empty;
        int theID = -1;
        if (newTicket.Equals("true")) {

            // we need to calculate a new ID
            theID = getNewID(context); // calculate the new ID = # of rows
            theID++; // add 1 to make it unique
        } else if (newTicket.Equals("false")) {

            // we can just get the ID from the POST parameter
            theID = context.Request["ticketID"] != null ? Convert.ToInt32(context.Request["ticketID"]) : -1;
        } else {

            // something went wrong with the 'newTicket' POST parameter
            context.Response.ContentType = "text/plain";
            context.Response.Write("Error with 'newTicket' POST parameter.");
        }

        // if theID is negative, something went wrong... can't continue
        if (theID < 0) {
            return;
        }

        // ready to read the files being uploaded and upload them to the correct directory
        int chunk = context.Request["chunk"] != null ? int.Parse(context.Request["chunk"]) : 0;
        string fileName = context.Request["name"] != null ? context.Request["name"] : string.Empty;
        var uploadPath = context.Server.MapPath("~/TicketUploads/" + theID + "/");
        HttpPostedFile fileUpload = context.Request.Files[0];

        // if the NEW directory doesn't exist, create it
        DirectoryInfo di = new DirectoryInfo("" + uploadPath + "");
        if (!(di.Exists)) {
            di.Create();
        }

        using (var fs = new FileStream(Path.Combine(uploadPath, fileName), chunk == 0 ? FileMode.Create : FileMode.Append)) {
            var buffer = new byte[fileUpload.InputStream.Length];
            fileUpload.InputStream.Read(buffer, 0, buffer.Length);
            fs.Write(buffer, 0, buffer.Length);
        }

        context.Response.ContentType = "text/plain";
        context.Response.Write("File uploaded.");
        return;
    }
}

我正在尝试使用 C# 将 Plupload 文件上传器集成到 ASP.NET 中。我读过Angry Monkeys articleMarco Valsecchi blog post,但我有点迷茫。

以上文章建议的C#大致如下:

int chunk = Request.QueryString["chunk"] != null ? int.Parse(Request.QueryString["chunk"]) : 0;
string fileName = Request.QueryString["name"] != null ? Request.QueryString["name"] : string.Empty;

HttpPostedFile fileUpload = Request.Files[0];

using (FileStream fs = new FileStream(Server.MapPath("~/TicketUploads/" + fileName), chunk == 0 ? FileMode.Create : FileMode.Append))
{
    Byte[] buffer = new Byte[fileUpload.InputStream.Length];
    fileUpload.InputStream.Read(buffer, 0, buffer.Length);

    fs.Write(buffer, 0, buffer.Length);
    fs.Close();
}

首先,我设置了Plupload配置如下:

$("#plupload_container").pluploadQueue({
  runtimes: 'html5,gears,flash,silverlight,html4',
  flash_swf_url: '../plupload/js/plupload.flash.swf',
  silverlight_xap_url: '../plupload/js/plupload.silverlight.xap',
  filters: [
    { title: "Image files", extensions: "jpg,gif" },
    { title: "Zip files", extensions: "zip" },
    { title: "Document files", extensions: "doc,pdf,txt" }
  ]
});

...但我觉得我在这里遗漏了一些上传工作所必需的东西。

我想我的主要问题是如何调用上面的 C# 代码以便开始上传?我在名为SubmitRequest.aspx 的页面上有一个表格。单击表单上的“提交”会产生以下结果:

$('form').submit(function (e) {

  // Validate number of uploaded files
  if (uploader.total.uploaded == 0) {
    // Files in queue upload them first
    if (uploader.files.length > 0) {
      // When all files are uploaded submit form
      uploader.bind('UploadProgress', function () {
        if (uploader.total.uploaded == uploader.files.length)
          $('form').submit();
      });
      uploader.start();
    }
    e.preventDefault();
  }
});

... 因此,当单击“提交”并上传文件时,上传程序就会启动。完成后,将提交表单的其余部分。我不明白如何将此事件链接到 C# 代码,该代码将处理上传到服务器上的文件夹 TicketUploads

对于这篇冗长的帖子,我深表歉意,但我将不胜感激:)

【问题讨论】:

标签: c# asp.net jquery-plugins httphandler plupload


【解决方案1】:

这是我为您编写的完整工作示例:

<%@ Page Title="Home Page" Language="C#" %>
<%@ Import Namespace="System.IO" %>
<script runat="server" type="text/c#">
    protected void Page_Load(object sender, EventArgs e)
    {
        // Check to see whether there are uploaded files to process them
        if (Request.Files.Count > 0)
        {
            int chunk = Request["chunk"] != null ? int.Parse(Request["chunk"]) : 0;
            string fileName = Request["name"] != null ? Request["name"] : string.Empty;

            HttpPostedFile fileUpload = Request.Files[0];

            var uploadPath = Server.MapPath("~/TicketUploads");
            using (var fs = new FileStream(Path.Combine(uploadPath, fileName), chunk == 0 ? FileMode.Create : FileMode.Append))
            {
                var buffer = new byte[fileUpload.InputStream.Length];
                fileUpload.InputStream.Read(buffer, 0, buffer.Length);

                fs.Write(buffer, 0, buffer.Length);
            }
        }
    }
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
    <title></title>

    <style type="text/css">@import url(css/plupload.queue.css);</style>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("jquery", "1.3");
    </script>
    <script type="text/javascript" src="/plupload/js/gears_init.js"></script>
    <script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>
    <script type="text/javascript" src="/plupload/js/plupload.full.min.js"></script>
    <script type="text/javascript" src="/plupload/js/jquery.plupload.queue.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $("#uploader").pluploadQueue({
            // General settings
            runtimes : 'gears,flash,silverlight,browserplus,html5',
            url : '/default.aspx',
            max_file_size : '10mb',
            chunk_size : '1mb',
            unique_names : true,
            // Resize images on clientside if we can
            resize : {width : 320, height : 240, quality : 90},
            // Specify what files to browse for
            filters : [
                {title : "Image files", extensions : "jpg,gif,png"},
                {title : "Zip files", extensions : "zip"}
            ],
            // Flash settings
            flash_swf_url : '/plupload/js/plupload.flash.swf',
            // Silverlight settings
            silverlight_xap_url : '/plupload/js/plupload.silverlight.xap'
        });

        // Client side form validation
        $('form').submit(function(e) {
            var uploader = $('#uploader').pluploadQueue();
            // Validate number of uploaded files
            if (uploader.total.uploaded == 0) {
                // Files in queue upload them first
                if (uploader.files.length > 0) {
                    // When all files are uploaded submit form
                    uploader.bind('UploadProgress', function() {
                        if (uploader.total.uploaded == uploader.files.length)
                            $('form').submit();
                    });
                    uploader.start();
                } else
                    alert('You must at least upload one file.');
                e.preventDefault();
            }
        });
    });
    </script>

</head>
<body>
    <form id="Form1" runat="server">
        <div id="uploader">
            <p>You browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.</p>
        </div>
    </form>
</body>
</html>

正如您将在此示例中看到的,文件被上传到名为default.aspx 的同一页面。请注意,chunkname 等参数已发布,因此您不应使用 Request.QueryString 来读取它们,而是直接使用 Request["chunk"],因为这也会查看 POST 正文。您还应该确保TicketUploads 文件夹存在于服务器的根目录中。

在此示例中,同一页面 default.aspx 用于显示上传表单和处理上传。在现实世界的应用程序中,这不是我会做的事情。我建议您使用一个单独的脚本来处理文件上传,例如通用 http 处理程序 (upload.ashx)。

最后,您会注意到我使用了一些默认设置,您可能希望修改和重新配置插件以满足您的需求。我刚刚从文档中获取了设置。


更新:

因为我建议使用单独的通用 http 处理程序来处理文件上传,所以看起来是这样的:

using System.IO;
using System.Web;

public class Upload : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        int chunk = context.Request["chunk"] != null ? int.Parse(context.Request["chunk"]) : 0;
        string fileName = context.Request["name"] != null ? context.Request["name"] : string.Empty;

        HttpPostedFile fileUpload = context.Request.Files[0];

        var uploadPath = context.Server.MapPath("~/TicketUploads");
        using (var fs = new FileStream(Path.Combine(uploadPath, fileName), chunk == 0 ? FileMode.Create : FileMode.Append))
        {
            var buffer = new byte[fileUpload.InputStream.Length];
            fileUpload.InputStream.Read(buffer, 0, buffer.Length);

            fs.Write(buffer, 0, buffer.Length);
        }

        context.Response.ContentType = "text/plain";
        context.Response.Write("Success");
    }

    public bool IsReusable
    {
        get { return false; }
    }
}

现在剩下的就是重新配置插件以指向这个通用处理程序:

...
runtimes: 'gears,flash,silverlight,browserplus,html5',
url: '/upload.ashx',
max_file_size: '10mb',
...

【讨论】:

  • 哇,真快...我会查看它并报告更多问题。谢谢!
  • 由于您建议使用单独的脚本,您能否提供一个示例来说明它的外观?
  • 文件处理程序是服务器端脚本,它接收 HTTP 请求,对其进行处理并返回响应。 ASPX 页面是文件处理程序的一种特殊情况,除了有更多额外的步骤,例如加载视图状态、实例化服务器端控件、呈现……所以当您向/upload.ashx 执行 HTTP 请求时,@987654333 @ 方法将被调用。在这种方法中,您可以访问所有请求参数,因此您可以提取文件,将其分块保存到磁盘并向客户端发送一些响应。 IsReusable 属性表示同一个实例是否...
  • .. 可以重用通用处理程序来服务多个 HTTP 请求。仅当您的处理程序是线程安全的时,才应将此属性设置为 true。如果您想更深入地了解内部工作原理,我建议您阅读一些教程。这是一个不错的选择:dotnetperls.com/ashx。至于您关于 ashx 和 aspx 页面之间通信的问题,我不明白您的意思。你到底想传达什么?请提供有关您的方案的更多详细信息。
  • @Hristo,好的,我了解您的问题。你真的应该再努力一点。这是您可以做的:在通用处理程序中只需编写您使用的完整路径,如context.Response.Write("foo bar")。现在在FileUploaded 事件中只需alert(info.response);,您将收到foo bar 警报。恭喜,您已成功地将信息从通用处理程序传递到调用 javascript 函数。我还建议您安装和使用FireBug,这将帮助您更轻松地调试此类问题,因为您将看到实际请求。
【解决方案2】:

这是一个用于 pluploader 的 ashx 文件的 VB 示例。

感谢@@Darin Dimitrov 谁提出了这个建议。它是有史以来最好的解决方案,有许多后备方案,如 silverlight、flash.. 等。它的超级大!

我没有找到任何 VB 示例,因此我将其转换为我的自我测试并工作!分块!

在 VisualStudio 中将 ashx 文件添加到您的网站。右键点击网站

网站 > 添加新项目 > 通用处理程序

这一切都在一个页面中,无需后面的代码。只需从 pluplaod 插件中调用它

<%@ WebHandler Language="VB" Class="upload" %>

Imports System
Imports System.IO
Imports System.Web


Public Class upload : Implements IHttpHandler


    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        Dim chunk As Integer = If(context.Request("chunk") IsNot Nothing, Integer.Parse(context.Request("chunk")), 0)
        Dim fileName As String = If(context.Request("name") IsNot Nothing, context.Request("name"), String.Empty)

        Dim fileUpload As HttpPostedFile = context.Request.Files(0)

        Dim uploadPath = context.Server.MapPath("~/uploads")
        Using fs = New FileStream(Path.Combine(uploadPath, fileName), If(chunk = 0, FileMode.Create, FileMode.Append))
            Dim buffer = New Byte(fileUpload.InputStream.Length - 1) {}
            fileUpload.InputStream.Read(buffer, 0, buffer.Length)

            fs.Write(buffer, 0, buffer.Length)
        End Using

        context.Response.ContentType = "text/plain"
        context.Response.Write("Success")
    End Sub

    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property

End Class

【讨论】:

    猜你喜欢
    • 2011-09-18
    • 1970-01-01
    • 2011-05-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-08-16
    • 1970-01-01
    相关资源
    最近更新 更多