使用JQuery和ASP.NET Generic Handler上傳文件 - 是否可能？

Question

我正在努力解決一個小問題。 我使用大多數客戶端（JQuery / JavaScript）代碼構建了一個完整的Web ASP.NET應用程序。 我使用通用處理程序來做一些延遲加載的數據，以及自動完成等。

其中一個要求是一個頁面需要能夠上傳文件，以及顯示有關uploadead文件的元信息。

我想知道是否有辦法完全從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控件只將文件名存儲在其值中。 因此，我將使用文件名向我的服務器發送一個字符串，而不是字節數組。

對此有任何想法將不勝感激！

Answer 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找到的最好的解決方案

Answer 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返回的響應並處理用戶信息。

如果這不是你想要的等式的一部分，請隨意評論並澄清你想要完成的是什么。

Answer 3

如果您可以指定您的應用程序通過哪些瀏覽器訪問（例如，它是一個內部業務應用程序），那么值得查看新的File API ，它是“HTML5”技術堆棧的一部分，這些技術開始出現在最新的瀏覽器中。 這使您可以通過客戶端Javascript直接訪問文件，而無需先將文件發布到服務器。

如果您的應用程序是面向公眾的，那么您仍然可以使用文件API，但是您需要在代碼中檢查它是否支持它，並為那些使用舊瀏覽器的人應用某種回退機制（例如Uploadify ）。

您可以在此處以及此處以及其他位置閱讀有關File API的更多信息。

Answer 4

我很確定這是不可能的; 如果它是一個很大的安全漏洞 - Javascript不應該從用戶的硬盤驅動器中獲取字節。

因此，您使用本機輸入類型=文件或使用預先存在的桌面字節（如Flash）。 幾個流行的上傳者使用這種方法...我最喜歡的是Uploadify 。 看一下，看看是否符合您的需求。

HTH。

Answer 5

我已經使用Valums ajax上傳控件實現了一個ASP.NET Handler來上傳文件。 您可以在此查看解決方案。 您也可以上傳大文件。 此處理程序支持IE，FF和Chrome瀏覽器。 您還可以從FF和Chrome中拖放多個文件（HTML 5）

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

Answer 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
   }
}