jquery 탭에서 여러 파일 업로드 제어 구현

Question

Im asp.net mvc를 사용하여 Im 2. jquery 탭이 3 개 있습니다. 세 개의 탭에서 나는 여러 파일을 업로드하고 서버에 저장하려고합니다. 무엇이 최선의 방법이 아약스 기본 파일 업로드를 구현하려면

Answer 1

Uploadify은 플래시를 기반으로하고 Form Plugin은 다른 양식 요소를 사용하여 작업을 수행 할 수 있기 때문에 조금 더 강력합니다. 저기 jquery 플러그인을 당신이 원하는 일을 할 톤이 있습니다. 검색 가능한 'jquery ajax uploads'를 제안하고 다른 옵션을 선택하여 프로젝트에 적합한 것을 확인하십시오.

편집 여기

는 텍스트 영역에서 응답을 반환하는 형태로 플러그인을 사용할 때 사용하는 코드입니다. 여기 그런

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 파일 업로드와 싶습니다. 여러 파일 업로드의 경우 빠른 Google에서 the jquery multifile plugin을 표시합니다.