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

Question

我正在使用表单和 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;

}

Answer 1

上传的工作方式是

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

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