清除文件输入？？严重地？ [复制]

Question

试图清除我的文件输入。我试过了：

$("#documentUploader").val(null);
$("#documentUploaderLabel").val(null);

$("#documentUploader").val("");
$("#documentUploaderLabel").val("");

$(".custom-file-input").fileinput("clear");

没有任何作用。清除文件输入和附加的标签到底有多难？

下面是用户选择文件的模式，以及上传和清除字段的代码。

<!-- MODAL: Vendor document upload -->
<div class="modal fade modal-content-right" id="vendorDocumentUploadModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-dark text-white">
        Upload document
        <div class="spinner-grow spinner-grow-sm text-warning customAjaxLoader mt-1" role="status">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-10">
            <div class="custom-file">
              <input id="documentUploader" name="file[]" type="file" multiple="multiple" class="custom-file-input">
              <label class="custom-file-label" id="documentUploaderLabel" for="file[]">Choose files</label>
            </div>
          </div>
          <div class="col-md-2">
            <button type="button" class="btn btn-outline-primary fa-pull-right" onclick="uploadFiles(<%= vendorId %>,'vendor');">Upload</button>
          </div>
        </div>
        <div class="mt-3">You can upload as many documents as you please. Note that these documents are bound to the vendor itself, and should not be contracts or documents pertaining to a contract.</div>
        <div id="showVendorDocumentProgress" class="mt-3"></div>
      </div>
      <div class="modal-footer shadow-none isblockablenospinner">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- MODAL END -->

Java 代码（文件完成的部分，UTYPE 设置为 VENDOR，仅供参考）。那里也有一些注释掉的行：

function uploadFiles(id, utype) {
  console.log("Uploading");
  console.log(utype);
  isLoading(1);
  var showWorkingMessage = "<div class='alert alert-info' role='alert'>";
  showWorkingMessage += "<div class='media'>";
  showWorkingMessage +=
    "<div class='spinner-grow spinner-grow-sm text-success mt-1 mr-2' role='status'>";
  showWorkingMessage += "<span class='sr-only'>Loading...</span>";
  showWorkingMessage += "</div>";
  showWorkingMessage +=
    "<div class='media-body'><strong>Saving</strong> Please wait for a little while...</div>";
  showWorkingMessage += "</div>";
  showWorkingMessage += "<div class='progress mt-1' style='height:3px;'>";
  showWorkingMessage +=
    "<div id='showContractDocumentUploadProgress' class='progress-bar bg-success' style='width: 0%;'></div>";
  showWorkingMessage += "</div></div>";

  var progressDivName = "";
  var progressFunctionName = "";

  if (utype == "contract") {
    // Contract
    progressDivName = "#showWorking";
    progressFunctionName = "progressHandlingFunction";
    $(progressDivName).html(showWorkingMessage);
  } else {
    // Vendor
    progressDivName = "#showVendorDocumentProgress";
    progressFunctionName = "progressVendorDocumentHandlingFunction";
    $(progressDivName).html(showWorkingMessage);
  }

  var formData = new FormData($("#aspnetForm").get(0));
  $.ajax({
    url: "ajax/vendor/details/documentupload.aspx?id=" + id + "&ut=" + utype,
    type: "POST",
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    xhr: function () {
      console.log(progressFunctionName);
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        myXhr.upload.addEventListener(
          "progress",
          utype == "contract"
            ? progressHandlingFunction
            : progressVendorDocumentHandlingFunction,
          false
        );
      }
      return myXhr;
    },
    success: function (ret) {
      if (ret == "OK") {
        new Noty({
          text:
            "<h5>Document uploaded</h5>The document was uploaded, thank you!",
          type: "success",
          timeout: 2000
        }).show();
      } else {
        new Noty({
          text:
            "<h5>Error</h5>The document was not uploaded, please try again.",
          type: "error",
          timeout: 2000
        }).show();
      }
      if (utype == "contract") {
        $.get(
          "ajax/vendor/details/contract_details.aspx?id=" + id,
          function (data) {
            $("#contractDetailsSummary").html(data);

            isLoading(0);
            $(progressDivName).fadeOut();
            $(".fileinput").fileinput("clear");
          }
        );
      } else {
        isLoading(0);
        refreshVendorDocuments();
        $(progressDivName).fadeOut();
        $("#documentUploader").val(null);
        $("#documentUploaderLabel").val(null);
        // $("#documentUploader").val('');
        // $(".custom-file-input").fileinput("clear");
        // $(".fileinput").fileinput("clear");
      }
    },
    error: function (ret) {
      console.log(ret);
      isLoading(0);
      $(progressDivName).fadeOut();
      $(".fileinput").fileinput("clear");
      new Noty({
        text: "<h5>Error</h5>An unspecified error occurred, please try again",
        type: "error",
        timeout: 2000
      }).show();
    }
  });
}

您可以看到我在哪里添加了应该清除字段的代码，但没有任何效果。任何人？？请问？？

Answer 1

原来它就像使用一样简单：

$('.custom-file-input').val(null);
$('.custom-file-label').text('Choose files');  

谢谢@Carsten！