JQuery AJAX отправляет массив файлов из формы - PullRequest
Новая
       12

JQuery AJAX отправляет массив файлов из формы

2 голосов
/ 24 января 2012

Я получил этот код где-то, чтобы загрузить фото без обновления браузера.Однако мне не понравился файл загрузчика, поэтому я решил использовать старый, с которым работал.Проблема в том, что он отправляет массив вместо строки из файла javascript (он предназначался для отправки нескольких файлов вместо одного).Вот код, который делает массив: 

input.addEventListener("change", function (evt) {
    document.getElementById("response").innerHTML = "Loading . . ."

    var i = 0, len = this.files.length, img, reader, file;

    for ( ; i < len; i++ ) {
        file = this.files[i];
            if (formdata) {
                formdata.append("uploaded_file[]", file);
    }   }   }

    if (formdata) {
        $.ajax({
            url: "img_upload.php",
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false
        }).done(function (res) {
                            /* *** show uploaded item *** */
                            /* *** show response *** */
            });
    }

Мои знания в Javascript очень слабые, и я не могу найти, как изменить этот код, чтобы отправлять загруженный файл сам по себе вместо массива.

Я пробовал это независимо, но ни один из них не работал (send_img - это имя / идентификатор формы): 

formdata = document.send_img.uploaded_file.value;
formdata = document.getElementById("uploaded_file");
formdata = new formdata ($('#send_img'));
formData = $('#send_img').serialize();
formdata.replaceWith("uploaded_file[]", file);

Я также пытался исключить for, чтобы использовать тот же ключ (0)но это не работает таким образом.Сокращенный код для img_upload.php: 

$fileName = $target . $_FILES["uploaded_file"]["name"];
$fileTmpLoc = $_FILES["uploaded_file"]["tmp_name"];
$fileName = $new_name .  "."  . $fileExt;
move_uploaded_file($fileTmpLoc, "images/images/temp/$fileName");

Как я могу отправить загруженный файл (или заголовок или все, что он должен отправить) только в одной строке и, в случае добавления второго файлазаменить первое вместо создания второго значения в массиве?

Ответы [ 2 ]

1 голос
/ 30 января 2012

Проблема не в вашей логике, проблема в том, что файлы не могут быть загружены через ajax.

Но, может быть, вы спросите, как это сделали другие?Что ж, попробуйте плагин для формы (другой .js, который работает с jQuery)

Я нашел это для вас, он работает с использованием метода submit, но, возможно, вы можете сделать отправку при изменении ввода или найти другое решениес действиями javascript.

Проверьте это: http://www.miguelmanchego.com/2009/subir-archivos-usando-ajax-jquery/

Сайт на испанском, но при необходимости переведите его на английский.Также эта ссылка включает в себя живой пример и загрузку исходного кода.

С уважением.

0 голосов
/ 17 января 2016

Ниже приведены мои настройки AJAX, которые могут загружать файлы 

method: "POST",
        url: url,
        headers: { 'Content-Type': undefined },
        transformRequest: function (data, headersGetter) {
            var formData = new FormData();
            angular.forEach(data, function (value, key) {
                if (Array.isArray(value)) {
                    // To save array of items
                    angular.forEach(value, function (value1, key1) {
                        if (value1.constructor.name != "File") {
                            angular.forEach(value1, function (value2, key2) {
                                formData.append(key + '[' + key1 + '].' + key2, value2);
                            });
                        }
                    });
                } else {
                    formData.append(key, value);
                }
            });

            return formData;
        },
        enctype: 'multipart/form-data',
        dataType: 'json',
        traditional: true,
        data: data,
        cache: false,
        processData: false,
        contentType: false
...