ASP.NET MVC에서 비동기 적으로 업로드 된 양식 파일을 유지하는 방법은 무엇입니까?

양식을 선택할 때 이미 업로드 한 경우 양식을 제출할 때 파일을 업로드 할 필요가없는 것 같습니다 (그리고 enctype양식 요소에서 속성 을 제거하고 싶을 것입니다 .

기본 단계는 사용자가 ajax (사용 FormData) 로 파일을 선택했을 때 파일을 업로드하고 저장 한 다음 해당 파일의 경로를 반환하여 최종적으로 양식을 제출할 때 해당 정보도 게시 할 수 있도록하는 것입니다.

보기에 표시 / 편집하려는 항목을 나타내는보기 모델을 정의하여 시작하십시오.

public class FileAttachmentVM
{
    public string Path { get; set; }
    public string DisplayName { get; set; }
}
public class MyViewModel
{
    .... // properties to display/edit in the view
    public List<FileAttachmentVM> Files { get; set; }
}

그리고보기에서

@model MyViewModel
...
@using (Html.BeginForm())
{
    ....
    <div id="file-inputs"></div> // placeholder for the file collection hidden inputs
}
<div id="file-names"></div> // place holder for the collection of file already uploaded
<input type="file" id="file" />
<button type="button" id="upload">Upload</button>
// template for adding new inputs for the file collection
<div id="template" style="display:none">
    <div class="file-details">
        <input type="hidden" class="file-path" name="Files[#].Path" value="" />
        <input type="hidden" class="file-name" name="Files[#].DisplayName" value="" />
        <input type="text" name="Files.Index" value="#" />
    </div>
</div>

파일을 업로드하고 DOM을 업데이트하는 스크립트

var fileInputs = $('#file-inputs');
var fileNames = $('#file-names');

$('#Upload').click(function () {
    var file = $('#file').get(0).files[0];
    if (!file) {
        return;
    }
    var formData = new FormData();
    formData.append("file", file);
    $.ajax({
        url: '@Url.Action("Upload", "...")',// add controller name
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function (data) {
            if (!data) {
                // Oops, something went wrong
                return;
            }
            $('#file').val(''); // clear file input
            // Add the display name
            fileNames.append($('<div></div>').text(data.DisplayName));
            // Add the inputs
            var index = (new Date()).getTime(); // unique indexer
            var clone = $('#template').clone(); // clone the template
            clone.html($(clone).html().replace(/#/g, index)); // update the indexer
            fileInputs.append(clone.html()); // append the inputs
            // update the input values
            var lastFile = fileInputs.find('.file-details').last();
            lastFile.find('.file-path').last().val(data.Path);
            lastFile.find('.file-name').last().val(data.DisplayName);
        }
    });
});

마지막으로 컨트롤러 방법

[HttpPost]
public JsonResult Upload(HttpPostedFileBase file)
{
    if (file != null && file.ContentLength > 0)
    {
        var displayName = Path.GetFileName(file.FileName);
        var fileExtension = Path.GetExtension(displayName);
        var fileName = string.Format("{0}{1}", Guid.NewGuid(), fileExtension);
        var path = Path.Combine(Server.MapPath("~/App_Data/Files"), fileName);
        file.SaveAs(path);
        return Json(new { DisplayName = displayName, Path = path });
    }
    return Json(null);
}

그런 다음 양식을 제출하는 컨트롤러 메서드에서

public ActionResult Create(MyViewModel model)
{
    // Initialize a data model, map the view model properties to it and save
    // Loop through model.Files and save each file display name and path to the database (along with the ID of the entity you created/updated

코드에 대한 몇 가지 참고 사항.

1. 사용자가 파일을 선택하자마자 파일을 업로드하겠다고 표시했습니다 . IMO는 예상하지 못한 동작입니다. 사용자가 명시 적으로 확인한 다음 업로드 버튼을 클릭하도록 허용하는 것이 더 좋지만 버튼 .change()이벤트가 아닌 파일 입력 이벤트 를 처리하도록 스크립트를 수정할 수 .click()있습니다.
2. 파일은 Guid고유한지 확인하기 위해 로 저장되며 다른 사용자가 동일한 이름의 파일을 업로드하는 경우 파일을 덮어 쓸 위험이 없습니다.
3. 사용자가 일부 파일을 업로드했지만 편집을 중단하면 어떻게되는지 고려해야합니다. 예를 들어 파일을 임시 디렉토리에 저장하고 제출 방법 양식으로 영구 디렉토리로 이동 (및 주기적으로 중단 된 파일 제거) 할 수 있습니다.
4. 사용자가 마음을 바꾼 경우 표시 이름 옆에 '삭제'링크를 포함 할 수도 있습니다 (해당 링크는 파일을 삭제하기 위해 ajax 메서드를 호출 함).