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

【问题标题】：html file input doesn't trigger on change event and disable file input controlhtml 文件输入不会触发更改事件并禁用文件输入控制
【发布时间】：2019-04-25 00:13:28
【问题描述】：

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

在用户保存产品信息之前，上传按钮应该是不可点击的。
保存产品并生成 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 事件未持续触发。

【问题讨论】：

标签： jquery asp.net-mvc html

【解决方案1】：

On change 事件对输入 type="file" 不起作用，尝试使用：

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

【讨论】：

此更改不会触发事件