Tutorial :Implementing multiple file upload control in jquery tabs



Question:

Im using asp.net mvc 2. I have three jquery tabs. In each of three tabs i want to upload multiple files and save on server. what may be the best approach to do this also i want to implement ajax base file upload


Solution:1

Uploadify is based on flash and Form Plugin is a little more powerful as it can do things with other form elements. There are a ton of jquery plugins out there that will do what you want. I suggest googling 'jquery ajax uploads' and trying out the different options presented to you to see which on will fit with your project.

EDIT

Here is the code I use when using the form plugin to return the response in a textarea.

Here's the upload action:

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

Then here is the 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>");      }  }  

Then here is the actual jquery call to start and handle the upload:

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


Solution:2

This should help with the AJAX file upload. For multiple file uploads, a quick google shows the jquery multifile plugin.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »