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

时间:2018-11-07 14:27:12

标签: javascript jquery asp.net-mvc forms file-upload

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

}

2 个答案:

答案 0 :(得分:1)

上传的工作方式是

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

更多代码会有所帮助,但是看来您正在删除输入的值(步骤3),然后再进行传输(步骤4)。对请求进行可处理的响应(或超时)(步骤5)后,最好这样做。

答案 1 :(得分:0)

提交之后,我使用javascript清除了文本框的内容。 document.getElementById("sheetName").value = "";