在没有表单或 Jquery 的情况下使用 AJAX 触发文件上传

Question

this works well when Getting and Sending text in JSON format. It also works well when uploading images using a form an input and a submit button.

function ajaxPromise(url, send) {

    return new Promise( function(resolve, reject) {

    var XHR = new XMLHttpRequest();

    XHR.open('POST', url);
    XHR.onload = function() {
      resolve(XHR.response); // Resolve promise with response
    };

    XHR.send(send);

    });
}

Need help in making it work without activating the submit button, for example, with the change event of the input.

input.addEventListener('change', function(e) {
    ajaxPromise('upload.php', file);
});

Answer 1

Can you try the below code

input.addEventListener('change', function(e) {
    // this.files -- Array[Files] // when multiple files are selected.
    // so Pick the first one
    ajaxPromise('upload.php', this.files[0]);
});