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

Posted 2023-05-09

【中文标题】通过表单上传文件后如何清除输入字段

【英文标题】：How to clear an input field after uploading a file via a form

【发布时间】：2019-04-10 23:58:41

【问题描述】：

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

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

  <iframe   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;

【参考方案1】：

上传的方式是

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

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

【参考方案2】：

在提交完成后，我开始使用 javascript 来清除文本框的内容。 document.getElementById("sheetName").value = "";