Implémentation du contrôle de téléchargement de fichiers multiples dans les onglets jquery

Question

Im utilisant asp.net mvc 2. J'ai trois onglets jquery. Dans chacun des trois onglets, je veux télécharger plusieurs fichiers et enregistrer sur le serveur. quelle peut être la meilleure approche pour le faire aussi je veux mettre en œuvre ajax fichier de base télécharger

Answer 1

Uploadify est basé sur le flash et Form Plugin est un peu plus puissant car il peut faire des choses avec d'autres éléments de forme. Il y a une tonne de plugins jquery qui feront ce que vous voulez. Je vous suggère de googler sur "jquery ajax uploads" et d'essayer les différentes options qui vous sont présentées pour voir laquelle correspond à votre projet.

EDIT

Voici le code que j'utilise lorsque vous utilisez le plugin formulaire pour retourner la réponse dans une zone de texte.

est ici l'action de téléchargement:

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

Alors voici le 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>"); 
    } 
} 

Ensuite, voici l'appel jquery réelle pour démarrer et gérer le téléchargement:

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 avec le téléchargement de fichier AJAX. Pour plusieurs téléchargements de fichiers, un google rapide montre the jquery multifile plugin.