파일 첨부 후 CKEditor 응답 콜백

Question

CKEditor을 사용하여 전자 메일을 보내고 첨부 파일을 업로드합니다. 다음은 최소 구성입니다. this source. Controller 측면에서

CKEDITOR.replace('email.Message', { 
    filebrowserUploadUrl: '/Controller/UploadAttachment', 
    extraPlugins: 'attach', // attachment plugin 
    toolbar: this.customToolbar, //use custom toolbar 
    autoCloseUpload: true, //autoClose attachment container on attachment upload 
    validateSize: 30, //30mb size limit 
    onAttachmentUpload: function(response) { 
    /* 
    the following code just utilizes the attachment upload response to generate 
    ticket-attachment on your page 
    */ 
    attachment_id = $(response).attr('data-id'); 
    if (attachment_id) { 
     attachment = $(response).html(); 
     $closeButton = $('<span class="attachment-close">').text('x').on('click', closeButtonEvent) 
     $('.ticket-attachment-container').show() 
     .append($('<div>', { 
      class: 'ticket-attachment' 
     }).html(attachment).append($closeButton)) 
     .append($('<input>', { 
      type: 'hidden', 
      name: 'attachment_ids[]' 
     }).val(attachment_id)); 
    } 
    } 
}); 

나는 아래

const string scriptTag = "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction({0}, '{1}', '{2}')</script>"; 

public ContentResult UploadAttachment() 
{ 
    string basePath = HttpContext.Server.MapPath("~/assets/Images/"); 
    const string baseUrl = @"/ckfinder/userfiles/"; 
    var funcNum = 0; 
    int.TryParse(Request["CKEditorFuncNum"], out funcNum); 

    if (Request.Files == null || Request.Files.Count < 1) 
    return BuildReturnScript(funcNum, null, "No file has been sent"); 

    if (!System.IO.Directory.Exists(basePath)) 
    return BuildReturnScript(funcNum, null, "basePath folder doesn't exist"); 

    var receivedFile = Request.Files[0]; 

    var fileName = receivedFile.FileName; 
    if (string.IsNullOrEmpty(fileName)) { 
    return BuildReturnScript(funcNum, null, "File name is empty"); 
    } 

    var sFileName = System.IO.Path.GetFileName(fileName); 

    var nameWithFullPath = System.IO.Path.Combine(basePath, sFileName); 
    //Note: you may want to consider using your own naming convention for files, as this is vulnerable to overwrites 
    //e.g. at the moment if two users uploaded a file called image1.jpg, one would clash with the other. 
    //In the past, I've used Guid.NewGuid() combined with the file extension to ensure uniqueness. 
    receivedFile.SaveAs(nameWithFullPath); 

    var url = baseUrl + sFileName; 
    return BuildReturnScript(funcNum, url, null); 
} 

private ContentResult BuildReturnScript(int functionNumber, string url, string errorMessage) { 
    return Content(
    string.Format(scriptTag, functionNumber, HttpUtility.JavaScriptStringEncode(url ? ? ""), HttpUtility.JavaScriptStringEncode(errorMessage ? ? "")), 
    "text/html" 
); 
} 

code 아래에있어 응답이 내가 onAttachmentUpload 내부에 돌아갈 것입니다 - function

<form enctype="multipart/form-data" method="POST" dir="ltr" lang="en" action="/Controller/UploadAttachment?CKEditor=email_Message&amp;CKEditorFuncNum=0&amp;langCode=en"> 
    <label id="cke_73_label" for="cke_74_fileInput_input" style="display:none"></label> 
    <input style="width:100%" id="cke_74_fileInput_input" aria-labelledby="cke_73_label" type="file" name="attachment" size="38"> 
</form> 
<script> 
     window.parent.CKEDITOR.tools.callFunction(98); 
     window.onbeforeunload = function({ 
      window.parent.CKEDITOR.tools.callFunction(99) 
     }); 
</script> 

그러나 일부 data-id 부착을 기대하고있다 id. 내가 어떤 반응을 보일지 전혀 모르겠다. 어떤 사람이 실제 응답이 어떤 모양인지 알려주고 data-id은 응답으로 attr으로 예상합니까? 또한 어쨌든이 파일을 여러 개 업로드 할 수 있습니까?

Answer 1

이제 응답을 반환하고 첨부 파일을 렌더링하는 방법입니다. 미래에 도움이되기를 바랍니다.

CKEDITOR.replace('email.Message', { 
    filebrowserUploadUrl: '/Controller/UploadAttachment', 
    extraPlugins: 'attach', // attachment plugin 
    toolbar: this.customToolbar, //use custom toolbar 
    autoCloseUpload: true, //autoClose attachment container on attachment upload 
    validateSize: 30, //30mb size limit 
    onAttachmentUpload: function(response) { 
    /* 
    the following code just utilizes the attachment upload response to generate 
    ticket-attachment on your page 
    */ 
    attachment_id = $(response).attr('data-id'); 
    if (attachment_id) { 
     attachment = response; 
     $closeButton = '<span class="attachment-close btn btn-danger float-right" style="margin-top:-7px"><i class="fa fa-trash"></i></span>'; //.on('click', closeButtonEvent) 
     $respDiv = '<ol class="breadcrumb navbar-breadcrumb" style="padding:18px 15px"><li style="display:block">' + attachment + $closeButton + '</li></ol>'; 
     $('.ticket-attachment-container').show() 
     .append($('<div>', { 
      class: 'ticket-attachment' 
     }).html($respDiv)) 
     .append($('<input>', { 
      type: 'hidden', 
      name: 'attachment_ids[]' 
     }).val(attachment_id)); 
     $('.ticket-attachment-container').on('click', '.attachment-close', function() { 
     $(this).closest('.ticket-attachment').remove(); 
     if (!$('.ticket-attachment-container .ticket-attachment').length) 
      $('.ticket-attachment-container').hide(); 
     }); 
    } 
    } 
}); 

:

[AcceptVerbs(HttpVerbs.Post)] 
public ContentResult UploadAttachment() { 
    string basePath = HttpContext.Server.MapPath("~/somepath"); 
    var funcNum = 0; 
    int.TryParse(Request["CKEditorFuncNum"], out funcNum); 

    if (Request.Files == null || Request.Files.Count < 1) 
    return Content("No file has been sent"); 

    if (!System.IO.Directory.Exists(basePath)) 
    Directory.CreateDirectory(Path.Combine(basePath)); 

    var receivedFile = Request.Files[0]; 

    var fileName = receivedFile.FileName; 
    if (string.IsNullOrEmpty(fileName)) { 
    return Content("File name is empty"); 
    } 

    var sFileName = System.IO.Path.GetFileName(fileName); 

    var nameWithFullPath = Path.Combine(basePath, sFileName); 

    receivedFile.SaveAs(nameWithFullPath); 
    var content = "<span data-href=\"" + nameWithFullPath + "\" data-id=\"" + funcNum + "\"><i class=\"fa fa-paperclip\"> </i> " + sFileName + "</span>"; 
    return Content(content); 
} 

및 I는 업로드 된 파일 이름을 추가 코드 밑에있는 JS 측