在jQuery選項卡中實現多個文件上傳控制

Question

使用asp.net mvc 2我有三個jQuery選項卡。在三個選項卡中，我希望上傳多個文件並保存在服務器上。什麼可能是最好的辦法做到這一點我也想實現ajax基本文件上傳

Answer 1

Uploadify基於flash，Form Plugin稍微強大一點，因爲它可以處理其他表單元素。有很多jQuery插件可以做你想做的。我建議用谷歌搜索'jquery ajax uploads'並嘗試向您展示不同的選項，以查看哪些內容適合您的項目。

EDIT

這裏是我使用的形式的插件時，返回在一個textarea的響應使用的代碼。

這裏的上傳動作：

public FileUploadJSONResult Upload() 
    { 
     FileUploadJSONResult result; 

     try 
     { 
      if (Request.Files.Count > 0) 
      { 
       // Save uploaded file here 
       AttachmentServices attachmentServices = new AttachmentServices(); 
       IAttachment attachment = attachmentServices.UploadFile(Request.Files[0]); 

       // Wrap the data in a textarea as required by the form plugin, but return it using JSON 
       result = new FileUploadJSONResult() 
       { 
        Data = new 
        { 
         FileName = attachment.FileName, 
         ErrorMessage = string.Empty 
        } 
       }; 
      } 
      else 
      { 
       result = new FileUploadJSONResult 
       { 
        Data = new 
        { 
         FileName = string.Empty, 
         ErrorMessage = "No file to upload. Please select a file to upload." 
        } 
       }; 
      } 
     } 
     catch (Exception e) 
     { 
      LogError(logger, e, null); 

      Exception root = e; 
      while ((root.InnerException) != null) 
      { 
       root = root.InnerException; 
      } 

      result = new FileUploadJSONResult 
      { 
       Data = new 
       { 
        FileName = string.Empty, 
        ErrorMessage = root.Message 
       } 
      }; 
     } 

     return result; 
    } 

然後這裏是FileUploadJSONResult：

public class FileUploadJSONResult : JsonResult 
{ 
    /// <summary> 
    /// The following explanation of this code is from http://www.malsup.com/jquery/form: 
    /// 
    /// Since it is not possible to upload files using the browser's XMLHttpRequest object, the Form Plugin 
    /// uses a hidden iframe element to help with the task. This is a common technique, but it has inherent limitations. 
    /// The iframe element is used as the target of the form's submit operation which means that the server response is 
    /// written to the iframe. This is fine if the response type is HTML or XML, but doesn't work as well if the 
    /// response type is script or JSON, both of which often contain characters that need to be repesented using 
    /// entity references when found in HTML markup. 
    /// To account for the challenges of script and JSON responses, the Form Plugin allows these responses to be 
    /// embedded in a textarea element and it is recommended that you do so for these response types when used in 
    /// conjuction with file uploads. Please note, however, that if a file has not been selected by the user for the 
    /// file input then the request uses normal XHR to submit the form (not an iframe). This puts the burden on your 
    /// server code to know when to use a textarea and when not to. If you like, you can use the iframe option of the 
    /// plugin to force it to always use an iframe mode and then your server can always embed the response in a textarea. 
    /// </summary> 
    /// <param name="context">Controller context</param> 
    public override void ExecuteResult(ControllerContext context) 
    { 
     this.ContentType = "text/html"; 
     context.HttpContext.Response.Write("<textarea>"); 
     base.ExecuteResult(context); 
     context.HttpContext.Response.Write("</textarea>"); 
    } 
} 

那麼這裏就是實際的jQuery電話啓動和處理上傳：

function BeginFileUpload() { 
     // Form plugin options 
     var options = { 
      success: function(data) { Attachments_ShowResponse(data); }, // post-submit callback 
      dataType: 'json',  // 'xml', 'script', or 'json' (expected server response type) 
      iframe: true 
     }; 

     // Bind the form to the form plugin 
     $('#idofForm').ajaxForm(options); 
     $('#idofForm').submit(); 
} 

// Callback after a file has been uploaded 
function Attachments_ShowResponse(data) { 
    // for normal html responses, the first argument to the success callback 
    // is the XMLHttpRequest object's responseText property 

    // if the ajaxForm method was passed an Options Object with the dataType 
    // property set to 'xml' then the first argument to the success callback 
    // is the XMLHttpRequest object's responseXML property 

    // if the ajaxForm method was passed an Options Object with the dataType 
    // property set to 'json' then the first argument to the success callback 
    // is the json data object returned by the server 

    if (data.ErrorMessage == '') { 
     Attachments_CreateNewTableRow(data.FileName); 
    } else { 
     Attachments_AppendError(settings.controlID, 'Error uploading ' + data.FileName + ': ' + data.ErrorMessage); 
    } 
} 

Answer 2

This should help與AJAX文件上傳。對於多個文件上傳，快速谷歌顯示the jquery multifile plugin。