ASP.NET MVC에서 유효성 검사가 실패한 후 입력 유형=파일 필드 값을 유지하는 방법은 무엇입니까?




asp.net-mvc forms (6)

나는 "불가능한"정답으로 표시되는 것에 동의하지 않습니다. 누군가가 여전히 가능성을 찾고 있다면, 저를 위해 일한 그 주변의 일이 여기에 있습니다. 나는 MVC5를 사용하고있다. 아이디어는 세션 변수를 사용하는 것입니다. ASP.Net Form 에서 아이디어를 얻었습니다.

내 모델 / ViewModel (관련 속성 만) :

public partial class emp_leaves
    {
        public string fileNameOrig { get; set; }
        public byte[] fileContent { get; set; }

        public HttpPostedFileBase uploadFile { get; set; }
    }

내 컨트롤러 (HttpPost) : // Check

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(emp_leaves emp_leaves)
{
    if (emp_leaves.uploadFile != null && emp_leaves.uploadFile.ContentLength>0 && !string.IsNullOrEmpty(emp_leaves.uploadFile.FileName))
    {
        emp_leaves.fileNameOrig = Path.GetFileName(emp_leaves.uploadFile.FileName);
        emp_leaves.fileContent = new byte[emp_leaves.uploadFile.ContentLength];
        emp_leaves.uploadFile.InputStream.Read(emp_leaves.fileContent, 0, emp_leaves.uploadFile.ContentLength);
        Session["emp_leaves.uploadFile"] = emp_leaves.uploadFile; //saving the file in session variable here
    }
    else if (Session["emp_leaves.uploadFile"] != null)
    {//if re-submitting after a failed validation you will reach here.
        emp_leaves.uploadFile = (HttpPostedFileBase)Session["emp_leaves.uploadFile"];
        if (emp_leaves.uploadFile != null && emp_leaves.uploadFile.ContentLength>0 && !string.IsNullOrEmpty(emp_leaves.uploadFile.FileName))
        {
            emp_leaves.fileNameOrig = Path.GetFileName(emp_leaves.uploadFile.FileName);
            emp_leaves.uploadFile.InputStream.Position = 0;
            emp_leaves.fileContent = new byte[emp_leaves.uploadFile.ContentLength];
            emp_leaves.uploadFile.InputStream.Read(emp_leaves.fileContent, 0, emp_leaves.uploadFile.ContentLength);    
        }
    }
//code to save follows here...
}

마지막으로 내 편집보기 내에서 : 여기, 나는 조건부로 파일 업로드 컨트롤을 보여주고있다.

< script type = "text/javascript" >
  $("#removefile").on("click", function(e) {
    if (!confirm('Delete File?')) {
      e.preventDefault();
      return false;
    }
    $('#fileNameOrig').val('');
    //toggle visibility for concerned div
    $('#downloadlrfdiv').hide();
    $('#uploadlrfdiv').show();
    return false;
  }); <
/script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
@model PPMSWEB.Models.emp_leaves @{ HttpPostedFileBase uploadFileSession = Session["emp_leaves.uploadFile"] == null ? null : (HttpPostedFileBase)Session["emp_leaves.uploadFile"]; } @using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data"
})) { @Html.AntiForgeryToken()
<div class="row">
  @*irrelevant content removed*@
  <div id="downloadlrfdiv" @((!String.IsNullOrEmpty(Model.fileNameOrig) && (Model.uploadFile==n ull || uploadFileSession !=null)) ? "" : "style=display:none;")>
    <label>Attachment</label>
    <span>
            <strong>
                <a id="downloadlrf" href="@(uploadFileSession != null? "" : Url.Action("DownloadLRF", "emp_leaves", new { empLeaveId = Model.ID }))" class="text-primary ui-button-text-icon-primary" title="Download attached file">
                    @Model.fileNameOrig
                </a>
            </strong>
            @if (isEditable && !Model.readonlyMode)
            {
                @Html.Raw("&nbsp");
                <a id="removefile" class="btn text-danger lead">
                    <strong title="Delete File" class="glyphicon glyphicon-minus-sign">  </strong>
                </a>
            }
            </span>
  </div>
  <div id="uploadlrfdiv" @(!(!String.IsNullOrEmpty(Model.fileNameOrig) && Model.uploadFile==n ull) && !Model.readonlyMode ? "" : "style=display:none;")>
    <label>Upload File</label> @Html.TextBoxFor(model => model.uploadFile, new { @type = "file", @class = "btn btn-default", @title = "Upload file (max 300 KB)" }) @Html.ValidationMessageFor(x => x.uploadFile)
  </div>
</div>
}

내가 만든 MVC 응용 프로그램에서 간단한 양식 있어요. 사용자가 이미지를 업로드 할 수 있도록 파일 필드가 있습니다. 그것은 모두 잘 작동합니다.

문제는 양식 제출이 유효성 검사에 실패하면 파일 입력란의 콘텐츠가 손실됩니다 (다른 입력란에는 채우기가 계속됨, HtmlHelpers 이상!). 유효성 검사 실패 후 파일 필드를 채우는 방법은 무엇입니까?

티아!


브라우저는 보안 위험 때문에 이러한 방식으로 설계되었습니다. HTML 소스 나 Javascript로 파일 입력 상자의 값을 설정하는 것은 불가능합니다. 그렇지 않으면 악의적 인 스크립트가 사용자의주의를 끌지 않고 일부 개인 파일을 훔칠 수 있습니다.

주제에 대한 흥미로운 정보 가 있습니다.


지금까지 내가 아는 한 HTML 파일 입력 상자의 값을 설정할 수 없습니다. 나는 파일 입력 상자를 레이블이나 텍스트 상자에 연결하는 것이 좋습니다.

그런 다음 파일 입력 상자의 값을 채워서 나중에 다시 제출할 수 있습니다.


파일이 너무 크지 않은 경우 base64로 숨겨진 필드의 값으로 사용할 수 있습니다.


미리 ajax를 통해 유효성 검사를 수행하고 부분 페이지 업데이트를 수행하는 것이 좋습니다. 이 경우 파일을 잃어 버리지 않습니다.


HTML 파일 입력 상자의 값을 설정할 수 없습니다. 이 문제를 해결하려면 유효성 검사 후 양식을 출력 할 때 파일 업로드 상자를 숨겨진 입력 필드로 바꾸십시오.

제출시 숨겨진 필드를 파일 입력 상자의 값으로 채 웁니다 (나중에 다시 제출). 한 번에 파일 업로드 또는 숨김 필드 이름을 표시해야합니다 (두 가지가 아닌).

참고 : 아래의 코드는 설명 목적으로 만 사용됩니다. 사용하는 언어에 적합한 코드로 바꾸십시오.

<?php /* You may need to sanitize the value of $_POST['file_upload']; 
* this is just a start */
if(isset($_POST['file_upload']) && !empty($_POST['file_upload'])){ ?>
<input type="hidden" name="file_upload" value="<?php print($_POST['file_upload']); ?>" />
<?php } else { ?>
<input type="file" name="file_upload" />
<?php } ?>




forms