时间戳

首页 > 解决方案 > 通过表单上传文件后如何清除输入字段

javascript - 通过表单上传文件后如何清除输入字段

问题描述

我正在使用表单和 onSubmit 方法上传文件，但是在提交并清除输入标签后，文件以某种空白格式及其 0KB 保存。当我注释掉该行以清除输入标签时，excel文件已正确加载。所以这里的主要问题是我清除输入标签错误的方式，或者我在错误的地方清除它。

经过一些研究，我发现了我正在犯的两个错误。首先，文件以 0kb 大小的不同格式保存，因为我在实际上传之前清除了输入字段，所以程序不知道文件名或文件类型。我改变了它并清除了 onSubmit 函数中的输入字段

  <iframe width="0" height="0" border="0" name="dummyframe" 
            style="display: none;" id="dummyframe"></iframe>
  @*<form id="uploadForm" name="form1" method="post" 
            enctype="multipart/form-data" action="/api/BulkUpload" 
            target="dummyframe" onsubmit="submitFunction()">*@
  <form id="uploadForm" name="form1" method="post" 
        enctype="multipart/form-data" action="/api/BulkUpload" 
        target="dummyframe" onsubmit="return Validate(this);">
     <div>

     </div>
     <div id="inputLabel">

        <input id="fileinput" name="image1" type="file" />
     </div>
     <div>
        <span class="btn btn-success fileinput-button">
           <i class="icon-plus icon-white"></i>
           <span>upload file</span>
           <input id="submitButton" class="submit" type="submit" 
                value="ok" @*onclick="setTimeout(clearLabel,3000)"*@ />
        </span>
     </div>
  </form>





var _validFileExtensions = [".xls", ".xlsx"];
function Validate(oForm) {

    //var file = input.file[0];
    var arrInputs = oForm.getElementsByTagName("input");
    for (var i = 0; i < arrInputs.length; i++) {
       var oInput = arrInputs[i];
       if (oInput.type == "file") {

          var sFileName = oInput.value;
          if (sFileName.length > 0) {
             var blnValid = false;
             for (var j = 0; j < _validFileExtensions.length; j++) {
                var sCurExtension = _validFileExtensions[j];
                if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length)
                    .toLowerCase() == sCurExtension.toLowerCase()) {
                   blnValid = true;
                   $('#fileinput').val('');
                   break;
                }
             }

             if (!blnValid) {
                $.msgbox("Sorry, " + sFileName + " is invalid, allowed extensions are: " 
                        + _validFileExtensions.join(", "));
                return false;
             }
             //if (file.size >= 5000000)
             //if (oInput.size >= 5242880)
             if (oInput.size >= 50000)

             {

                $.msgbox("Sorry, " + sFileName + " maximum file size is 5MB ");
                return false;
             }
          }
       }
    }

    return true;

}

标签： javascriptjqueryasp.net-mvcformsfile-upload

解决方案

上传的工作方式是

  1. 用户填写表格。
  2. 用户点击提交。
  3. 应用程序验证表单数据。如果无效，请显示建议并继续执行步骤 1。
  4. 如果表单有效，则将数据发送到服务器。
  5. 成功后显示用户反馈并清除表单。（+错误处理）

您的更多代码会有所帮助，但您似乎在传输（步骤 4）之前删除了输入的值（步骤 3）。最好在您的请求得到可处理的响应（或超时）之后再做（第 5 步）。

推荐阅读