Ajax загрузка файлов на сервер

@lipton_v · Регистрация: 20.03.2017

Студворк — интернет-сервис помощи студентам

Доброго времени суток. Необходимо загружать файлы на сервер с помощью ajax. Серверный язык - python, фреймворк - Flask. На клиенте - чистый js. Но сделать загрузку не получается. На какой стороне ошибка - не знаю, выдает 400 ошибку (BAD REQUEST).
Функция на python срабатывает. Загрузка файлов обычным POST запросом получается. В чем проблема, как исправить?

HTML5
1
2
<button class="send">Отправить</button>
<input type="file" name="file" style="visibility:hidden;" multiple id="new-homework" value="Выберите файлы">

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var nf_button = document.getElementById("new-homework");
nf_button.addEventListener("change", function() {
    var files = nf_button.files;
    canSendFiles(files);
}, false);
 
 
function canSendFiles(files) {
    document.querySelector('button.send').onclick = function () {
        var form = new FormData();
        form.append('file', files);
        var request = new XMLHttpRequest();
        request.onreadystatecheng = function () {
            if(request.readyState == 4 && request.status == 200){
                console.log('успех');
            }
        }
        request.open('POST', '/upload_file', true);
        request.setRequestHeader('Content-type', 'multipart/form-data');
        request.send(form);
    }
}

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
UPLOAD_FOLDER = "C:\chess_school\pa\saved"
    ALLOWED_EXTENSIONS = set(['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif',
                              'TXT', 'PDF', 'PNG', 'JPG', 'JPEG', 'GIF']
                             )
 
 
    @app.route('/upload_file', methods=['GET', 'POST'])
    def upload_file():
        """
        Files upload
 
        :return:
 
        """
        if request.method == 'POST':
            file = request.files['file']
            print(file)
            if file and allowed_file(file.filename):
                filename = secure_filename(file.filename)
                path = app.config['UPLOAD_FOLDER']
                if not os.path.exists(path):
                    os.makedirs(path)
                file.save(os.path.join(path, filename))
                return redirect(url_for('uploaded_file',
                                        filename=filename))
        return '''
        <!doctype html>
        <title>Upload new File</title>
        <h1>Upload new File</h1>
        <form action="" method=post enctype=multipart/form-data>
          <p><input type=file name=file>
             <input type=submit value=Upload>
        </form>
        '''
 
 
    @app.route('/uploads/<filename>')
    def uploaded_file(filename):
        return send_from_directory(app.config['UPLOAD_FOLDER'],
                                   filename)

@Omion · 25.07.2018, 08:24

request.onreadystatechenge он после open пишется. Ну в доках так. Глянь

@j2FunOnly · 25.07.2018, 09:44

Сообщение от Omion

request.onreadystatecheng он после open пишется

Без разницы, колбек жеж.

lipton_v, уберите request.setRequestHeader('Content-type', 'multipart/form-data'); броузер сам всё сделает, иначе у вас в заголовке Content-Type не будет boundary.

https://learn.javascript.ru/xh... -form-data
https://devdocs.io/dom/formdat... ta_objects

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@Omion 190 / 55 / 12 Регистрация: 19.05.2015 Сообщений: 352
	25.07.2018, 08:24
	request.onreadystatechenge он после open пишется. Ну в доках так. Глянь 0