jquery - html 文件输入不会触发更改事件并禁用文件输入控制

Question

我有一个简单的 html 表单，我在其中保存产品信息，然后使用保存的产品信息刷新屏幕。之后，用户可以上传文件。我在这里有两个问题：

1. 在用户保存产品信息之前，上传按钮应该是不可点击的。
2. 保存产品并生成 ID 后，文件输入按钮应可单击并允许文件上传。

我已经尝试从其他帖子中像这样重置表单值：

$('#docUpload').closest('form').get(0).reset();

HTML

 <div class="input-group mb-3">                    
      <input type="file" id="docUpload" style="display:none"/> 
      <label for="docUpload" class="btn btn-info">Upload Doc</label>        
 </div> 

JavaScript

$('#docUpload').on('click', function () {
    $('#docUpload').closest('form').get(0).reset();
    this.value = null;
});

$('#docUpload').on('change', function (e) {

    $('#docUpload').closest('form').get(0).reset();

    var files = $('#docUpload').get(0).files;

    var formData = new FormData();
    for(let i=0; i<files.length; i++){

        formData.append('DocumentUpload', files[i]);
        formData.append('PId', $('#pId').val());
        formData.append('Name', 'abc');            
    }
        UploadFiles(formData);
    }); 

function UploadFiles(formData) {

    $.ajax({
       type: 'POST',
        url: '/Some/UploadFile',
        data: formData,
        contentType: false,
        processData: false,
        success: function (data) {
            alert(data); 
        }
    });

};

我可以保存产品信息并从 ajax 回调中重新加载表单。我无法让此文件输入始终如一地工作，有时我会在控制台中看到 DOMException。

Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'Window': An object could not be cloned.
    at Object.t.messageJumpContext

事件onchange不会持续触发。

标签： jqueryasp.net-mvchtml

Answer 1

更改事件对输入类型 =“文件”不起作用，请尝试使用：

<script>
   $('#docUpload').on('keyup keydown blur keypress', function (e) {

      $('#docUpload').closest('form').get(0).reset();

      var files = $('#docUpload').get(0).files;

      var formData = new FormData();
    for(let i=0; i<files.length; i++){

        formData.append('DocumentUpload', files[i]);
        formData.append('PId', $('#pId').val());
        formData.append('Name', 'abc');            
    }
        UploadFiles(formData);
   }); 
</script>