使用Plupload与ASP.NET/C#

Question

使用Plupload与ASP.NET/C#

Hri*_*sto 39 c# asp.net httphandler jquery-plugins plupload

UPDATE

我能够让一切正常工作,我只想回复更新的代码.我使用了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;
    }
}

Run Code Online (Sandbox Code Playgroud)

我正在尝试使用C#在ASP.NET中集成Plupload文件上传器.我已经阅读了愤怒的猴子文章以及Marco Valsecchi的博文,但我有点迷失了.

上述文章建议的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();
}

Run Code Online (Sandbox Code Playgroud)

首先,我已经设置了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" }
  ]
});

Run Code Online (Sandbox Code Playgroud)

...但我觉得我在这里缺少一些上传工作所必需的东西.

我想我的主要问题是如何调用上面的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();
  }
});

Run Code Online (Sandbox Code Playgroud)

...所以上传者在点击"提交"并上传文件时启动.完成后,表单的其余部分将被提交.我不明白如何将此事件链接到将处理上传到TicketUploads服务器上的文件夹的C#代码.

我为这篇冗长的帖子道歉,但我很感激任何帮助:)

Answer 1

Dar*_*rov 57

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

<%@ 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>

Run Code Online (Sandbox Code Playgroud)

正如您将在本示例中看到的那样,文件被上传到名为的同一页面default.aspx.请注意,诸如chunk和namePOST之类的参数不应该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; }
    }
}

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

文件处理程序是服务器端脚本,它接收HTTP请求,处理它并返回响应.ASPX页面是文件处理程序的一个特例,除了还有更多的附加步骤,比如加载视图状态,实例化服务器端控件,渲染......所以当你对`/ upload.ashx`执行HTTP请求时,将调用`ProcessRequest`方法.在此方法中,您可以访问所有请求参数,因此您可以提取文件,将其以块的形式保存到磁盘并向客户端发送一些响应.`IsReusable`属性指示是否相同的实例... (3认同)
可以重用通用处理程序的..来提供多个HTTP请求.只有在处理程序是线程安全的情况下,才应将此属性设置为true.如果你想深入了解内部工作原理,我建议你阅读一些教程.这是一个很好的:http://dotnetperls.com/ashx.关于ashx和aspx页面之间的通信问题,我不明白你是什么意思.你到底想要沟通什么？请提供有关您方案的更多详细信息. (3认同)

Answer 2

Pio*_*ula 7

这是一个用于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

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年前
查看次数：	28381 次
最近记录：	13 年，4 月前