Как реализовать отправку файлов через Ajax?

Question

[Banan44]

Как реализовать отправку файлов через Ajax? При этом нужно отправить файл сразу после того как юзер выберет и загрузит его, т.е без всяких кнопок отправить.

Answer 1

[beerhunter]

Добавляете файл в FormData, делаете запрос вида

$.ajax({
          type: 'POST',
          url: url,
          data: formData,
          processData: false,
          contentType: false,
         ....

чтобы оно сработало сразу после выбора файла, вешаете отправку на onChange инпута с файлом

Comments

[Banan44]

а как добавить файл в js? как его в переменную занести

[alex-1917]

Banan44,

formData.append('myfile', this.myfile.files[0]); // добавляем файл

Answer 2

[Shannon]

На input(type='file') вешается функцию обработчик на событие 'change', например "uploadFiles"
При вызове функции в this.files (даже без multiple, если только 1 файл, всё равно будет this.files) будут все добавленные файлы, их можно либо добавить в единую форму и отправить все вместе. Либо отправить по одному, каждый раз создавая новую форму

function uploadFiles(e) {
    const formData = new FormData()
    for (let file of this.files) {
        formData.append('files', file)
    }

    const xhr = new XMLHttpRequest()
    xhr.upload.onloadstart = function () {
        console.log('Начали загружать')
    }
    xhr.upload.onprogress = function (event) {
        console.log(`Загрузили ${event.loaded} из ${event.total}`)
    }
    xhr.upload.onload = function () {
        console.log(`Всё отправлено`)
    }
    xhr.upload.onerror = function () {
        console.log('Произошла ошибка при отправке');
    }

    xhr.open("POST", '/upload')
    xhr.send(formData)

    xhr.onreadystatechange = function () {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                console.log('ok')
            }
            else {
                console.log('error')
            }
        }
    }
}