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

Question

I am uploading a file using forms and onSubmit method however after submitting and clearing the input label the file is saved in some blank format and its 0KB. When I comment out the line to clear the input label the excel file is loaded correctly. So the main issue here is the way I am clearing that input label is wrong or I am clearing it in the wrong place.

After some research I came across two errors that I was making. Firstly the file was saving in a different format with 0kb size because I was clearing the input field before the actual upload happened so the program did not know the file nameor file type. I changed that and cleared the input field in the onSubmit function

  <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

The way the upload could work is

1. User fills in form.
2. User hits submit.
3. App validates form data. If not valid, show advice and go on with step 1.
4. If form valid, send data to server.
5. After success show user feedback and clear the form. (+Error handling)

More of your code would be helpful, but it seems you are deleting the value of the input (step 3) before transmission (step 4). Better do it after a processable response (or timeout) of your request (step 5).

Answer 2

I eneded up using javascript to clear the contents of the textbox after the submit has happened. document.getElementById("sheetName").value = "";