使用 JQuery 和 ASP.NET 通用处理程序上传文件 - 可以吗？答案

【问题标题】：File upload with JQuery and ASP.NET Generic Handler - Is it possible?使用 JQuery 和 ASP.NET 通用处理程序上传文件 - 可以吗？
【发布时间】：2011-02-11 18:20:58
【问题描述】：

我正在尝试解决一个小问题。我主要使用客户端（JQuery/JavaScript）代码构建了一个完整的 Web ASP.NET 应用程序。我使用通用处理程序来做一些数据的延迟加载，以及自动完成等。

其中一个要求是一个页面需要能够上传文件，以及显示有关上传文件的元信息。

我想知道是否有办法完全用 JQuery/JavaScript 上传文件。我研究了很多插件，但它们都依赖于 php 后端。

我的想法是创建一个帖子：

$(function(){
    $('#submit').live('click', function(event){

        $.post('/SomeOtherHandler.ashx',  //can be '/someotherpage.aspx'
        { 
            filename: $('#fileUpload').val(), 
            timestamp: (new Date()).toString() 
        }, function(data){
             //do something if the post is successful.
        });

    });
});

这行得通吗？我知道，如果您包含 json 对象 { filename: value, timestamp: value }，它将显示在 HttpContext.Request.Params 集合中，我可以毫无问题地阅读它。

但问题是我不知道这将如何工作，因为 FileUpload html 控件仅将文件名存储在其值中。因此，我将使用文件名而不是字节数组向我的服务器发送一个字符串。

对此的任何想法将不胜感激！

【问题讨论】：

如果我错了，请纠正我，但每当使用 <input type="file".../> 时，都会创建一种特殊类型的帖子：文件以及其他一些东西都提供了 mime 类型。无论您的<form action="".../> 指向什么，该帖子都会发生。当您单击<input type="submit".../> 时，表单的全部内容将通过 http POST 发送到服务器端代码，包括文件位。我不是要求从 JavaScript 中获取文件，而只是重新创建该 http POST，以便我的处理程序/页面可以从 <input type="file".../> 字段中获取数据。
javascript 无法发布具有文件输入类型的表单。它不会上传文件。
我也有类似的问题。多亏了 File 对象，实现 HTML5 拖放是小菜一碟。但是，我的适用于尚不支持拖放的浏览器（基本上是 IE 和旧浏览器）。仍在寻找方法

标签： javascript jquery asp.net jquery-plugins file-upload

【解决方案1】：

我正在使用 uploadify 插件 (http://www.uploadify.com/) - 正如 Jeremy 所说，它不在 javascript 中 - 这是不可能的。它在闪存中。它很容易安装。

$('#file_upload').uploadify({
   'uploader'  : '/uploadify/uploadify.swf',
   'script'    : '/uploadify/uploadify.ashx',
   'cancelImg' : '/uploadify/cancel.png',
   'folder'    : '/uploads',
   'auto'      : true,      
   'fileExt': '*.xls;*.xlsx;*.csv',
   'buttonText': 'Select your file',
   'onError'     : function (event,ID,fileObj,errorObj) {

  alert(errorObj.type + ' Error: ' + errorObj.info);

},
'onComplete'  : function(event, ID, fileObj, response, data) 
                {
                    var obj = jQuery.parseJSON(response);
                    if (obj.error != "" & obj.errror != null)
                    {
                        lblTable.html("error : " + obj.error);
                    }
                    else


                    {
                        lblTable.html(obj.table);
                       lblEditData.show();
                       lblTable.hide();
                    }

                }
 });

在 uploadify.ashx 上：

public class uploadify : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        System.Web.HttpPostedFile file = context.Request.Files["Filedata"];

        //Check extension
        string extension = "";
        try
        {
            extension = file.FileName.Split('.')[file.FileName.Split('.').Length - 1];
            if (extension != "xls" & extension != "xlsx" & extension != "csv") throw new Exception("Error of the extension");
        }
        catch
        {
            context.Response.Write("{\"error\",\"Error with the extension of the file\"");
        }


        string linkFile = System.Web.HttpContext.Current.Server.MapPath("~") + "uploads" + "\\" + DateTime.Now.ToString("yyMMddHHmm") + APIReportPro.DocumentPDF.RandomString(4) + "." + extension;

        file.SaveAs(linkFile);


  ...etc...

这是我为 asp.net 找到的最好的解决方案

【讨论】：

快速问题...是否可以将以下内容添加到脚本的 url：/uploadify/uploadify.ashx?type=create&val1=val1&val2=val2... 动态？否则你有竞争条件。如果需要 val1 和 val2 以及要保存到 sql 的文件流...那么您将不知道文件是先上传还是 val1 和 val2 准时到达那里...。
我不确定你的意思...我没有尝试但猜想你可以在你的 get 查询中添加参数到 /upladify.ashx
@Zitun 你可以使用 System.IO.Path.GetExtension 获取文件扩展名

【解决方案2】：

当您将文件上传到服务器时，可以归结为三个选项。您可以使用原生 html 文件上传功能、Flash 或 Java。 Javascript 不能将文件上传到服务器，它只能修饰内置的 html 功能。话虽如此，我只能假设您正在尝试模仿 ajax，例如上传功能。如果是这样，有一种方法可以使用 iframe 上传文件，这看起来就像您正在使用 ajax。

您将创建一个表单

<form id="file_upload_form" method="post" enctype="multipart/form-data" action="upload.aspx">
    <input name="file" id="file" size="27" type="file" /><br />
    <input type="submit" name="action" value="Upload" /><br />
    <iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>

此表单使用 iframe 发布文件，这将导致主页永远不会刷新。您可以连接您的 jquery 来处理 iframe 返回的响应并处理用户信息。

如果这不是您正在寻找的方程式的一部分，请随时发表评论并澄清您想要完成的任务。

【讨论】：

那么如何使用 iframe 呢？只需将表单的操作指向“upload.aspx”？

【解决方案3】：

如果您可以指定通过哪些浏览器访问您的应用程序（例如，它是一个内部业务应用程序），那么值得一试新的File API，它是“HTML5”技术堆栈的一部分，开始出现在最新的浏览器。这使您可以通过客户端 Javascript 直接访问文件，而无需先将文件发布到服务器。

如果您的应用是面向公众的，那么您仍然可以使用 File API，但您需要在代码中为它使用check for support，并为那些较旧的应用应用某种回退机制（例如Uploadify）浏览器。

您可以在其他地方阅读有关文件 API here 和 here 的更多信息。

【讨论】：

伙计，如果这能得到广泛的支持，那就太好了……我们已经等待了很长时间来寻找一种体面的上传处理方式。
我认为这是一个可以保留的，假设它没有遇到一些主要的安全问题 - 它已经被一些大型网站（例如 Box.net）使用。时间到了！
我在我的网站上支持 Chrome、Safair 和 Firefox。它工作得很好。太糟糕了 IE9 放弃了这个肥皂。 Opera 不支持 File API，但它们支持文件输入的 multiple 属性。
我要发帖“然后猜猜哪个主流浏览器不支持它，而不是市场上的所有其他浏览器！”

【解决方案4】：

我很确定这是不可能的；如果是这样，那就是一个很大的安全漏洞——Javascript 不应该能够从用户的硬盘驱动器中获取字节。

因此，您无法使用本机输入 type=file 或使用预先存在的桌面字节，例如 Flash。几个流行的上传者使用这种方法......我最喜欢的是Uploadify。看看那个，看看它是否不适合你的需要。

HTH。

【讨论】：

Uploadify 依赖于 php 后端。
完全没有——我在 ASP.Net 上使用过很多次：uploadify.com/forums/discussion/45/…。
是的，你错了，恐怕 bleepzter - Uploadify 不需要 PHP。

【解决方案5】：

我已经实现了一个 ASP.NET 处理程序，用于使用 Valums ajax Upload 控件上传文件。您可以在此处查看解决方案。您也可以上传大文件。此处理程序支持 IE、FF 和 Chrome 浏览器。您还可以从 FF 和 Chrome (HTML 5) 拖放多个文件

http://ciintelligence.blogspot.com/2011/05/aspnet-server-side-handler-for-valums.html

【讨论】：

【解决方案6】：

使用 jquery，您可以执行以下操作：

<input type="file" name="file" id="file1" runat="server" />

$("#<%=file1.ClientID%>").change(function () {
  //Do stuff
   $(this).upload('youHandler.ashx', function (res) {
     //do stuff on success
   }
}

现在你可以在 yourHandler.ashx 上做这样的事情：

public void ProcessRequest(HttpContext context)
{
   if (context.Request.Files.Count > 0)
   {
      var fileCount = context.Request.Files.Count;
      var fileStram = var file = context.Request.Files[0].InputStream;

      //Do whatever you want
   }
}

【讨论】：