Question

我有一个简单的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事件未始终触发。

Answer 1

更改事件不适用于输入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>

html文件输入不会在更改事件上触发并禁用文件输入控件

1 个答案: