Как вы загружаете файл (ы) с AJAX

Question

Как вы загружаете файл (ы) с AJAX

-4

В настоящее время я пытаюсь загрузить файл через форму, которую я создал, используя jQuery. Это то, что я пытаюсь сделать:

    function ajax_upload(){
    var formData = new FormData($('form#userform'));
        $.ajax({
        url: location.protocol + "//" + location.host + "/profile/uploadPicture",
        dataType: 'json',
        data: formData,
        type: 'post',
        success: function(data, status){
        if (data.status == 'error') {
            $('#error').html(data.msg);
        }
        else {
            var filename = location.protocol + "//" + location.host + "/data/profiles/" + data.msg;

            $('input#filename').val(filename);
            close_upload_form();
            pop_profilechanger(filename);

        }
    }
});
    return false;

}

форма появляется для публикации на бэкэнд, но при попытке вернуть имя файла из загруженного файла в объект JSON, например: echo json_encode (array ('status' => $ status, 'msg' => $ msg));

Здесь что-то не так? пожалуйста, скажите мне

Sml004 07 авг. 2012, в 05:04

Источник

1

В то время как вы не сказали, в чем проблема, мы должны держать вещи в рамках jQuery для всех намерений и целей. var formData = new FormData($('form#userform')); должно быть var formData = $('form#userform').serialize() - это гарантирует, что данные будут отправлены на сервер в виде строки вроде name=george&[email protected]&validated=1 Ohgodwhy 07 авг. 2012, в 02:15




1

Вы не можете загружать напрямую через javascript как угрозу безопасности, и политики на уровне браузера не позволят этого. Есть обходные пути, включающие вспышку, iframes, шестерни, розетки и другие различные техники. Но в целом, я думаю, что Flash - ваш лучший кандидат. Это также очень вероятно, почему вы не получаете никаких загрузок на работу. Да, форма будет публиковаться, но не вместе с файлом, как вы ожидаете, используя обычные средства AJAX. проверить plupload его загрузчик jquery, который очень простой в дизайне, но очень эффективный

chris
07 авг. 2012, в 02:41






0

за два дня такой вопрос задавали 3-4 раза

zb'
07 авг. 2012, в 02:43






3

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

chris
07 авг. 2012, в 02:48






2

JQuery-Ajax-файлы для загрузки

zb'
07 авг. 2012, в 02:49






0

@chris Крис, кажется, у меня нет разрешения, чтобы установить его как обман

zb'
07 авг. 2012, в 02:49






0

@chris Крис Нет. Нет вспышки. Никогда.

Cole Johnson
07 авг. 2012, в 03:02






0

@eicto Помечено.

Cole Johnson
07 авг. 2012, в 03:03






0

@ColeJohnson никогда не говорил, что вспышка была тебе, но это ответ. Это хороший запасной вариант для браузеров, которые не поддерживают компоненты HTML5. Но у него есть свои недостатки, как и у других решений лично. Я предпочитаю средства, совместимые с HTML5, когда это возможно.

chris
07 авг. 2012, в 03:15






0

Вот одна из причин, по которой я указал, что у plupload есть множество вариантов выбора, и он грациозно переходит на другие, когда предпочтение не поддерживается. Или, если вы хотите, чтобы он перешел на сбой, вы можете установить его. plupload довольно прост в настройке для тех, кто просто хочет преодолеть, казалось бы, небольшие препятствия, такие как загрузка файла

chris
07 авг. 2012, в 03:17






0

это работает с этим, но я не могу обработать, когда это успешно загружает $ ('input # userfile'). live ('change', function () {console.log ('upload'); $ ('form # userform'). ajaxForm ({ }).представить(); });

Sml004
07 авг. 2012, в 03:38


Показать ещё 9 комментариев




Поделиться:



Теги:

php


javascript


jquery


ajax


ajax-upload







1 ответ



0



 Вот как я это делаю. Если вам нужна дополнительная информация, а не только мой вставленный код, ознакомьтесь с этим http://www.html5rocks.com/en/tutorials/file/dndfiles/, потому что мой код был создан для перетаскивания файлов

        handleFiles : function(files, evt, target)
        {
            console.log(target);
            $.each(files, function(index, value)
            {
                var file = value;

                reader = new FileReader();
                reader.onload = function(evt)
                {
                    var li = $("<li class='uploading'><img data-image-id='0' src='" + evt.target.result + "' /></li>");
                    target.find('.imagesList').append(li);

                    var request = new XMLHttpRequest();
                    var formData = new FormData();
                    formData.append('image', file);

                    request.open("Post", settings.uploadImageUrl);
                    request.addEventListener("load", function(evt)
                    {
                        var id = evt.target.responseText;
                        li.removeClass('uploading');
                        li.find('img').attr('data-image-id', id);

                    }, false);
                    request.send(formData);
                };

                reader.readAsDataURL(value);

            });
        },



Gareth Parker
07 авг. 2012, в 04:43

Поделиться











Ещё вопросы

0Генерация нескольких JQuery Click
1Как заставить функцию выставлять свои объекты и методы-члены, используя RequireJS AMD
0Отметка времени одного часа
1Использование переменных для построения запроса LinQ?
1Активная точная демоверсия роутера?
1Приложение магазина C #, получающее переменные данные Json
1Функция re.findAll () в Python не будет работать должным образом
1Что делать с объектом Permission после его создания
0Проблема перестановки узлов с двойным списком
0как содержать файл * .tpl в переменной php?
1Период панд с пользовательской продолжительностью
1Node.js aes-256-cbc в Java
0выпадающая навигация в блокноте и перенос в dw cs6, она работает в режиме реального времени, а не в любом тестовом браузере, и мои страницы не связаны
4Как обновить значение статического контекста, сохраненное из общих настроек?
1Передача параметров через URL в C # ASP.net
0Лучший подход к созданию приложения киоска с представлениями, которые меняются по таймеру
1XDocument создать XElement с комментарием XML
1JPanel заполнен кнопками внутри JScrollPane
0Доступ к значению свойства с помощью объекта
0Как настроить контент для ссылок из вложенной навигации
0Данные не отображаются после перенаправления страницы ASP.NET C #
1Коробки с картинками, дающие их изображения картинкам под ними
1Установка генератора на конкретное значение
1Как работают функции Python SimpleHTTPServer do_GET и do_POST?
1Какая разница между решениями проблемы «текстовая коммуникация не разрешена»
1Как не оттолкнуть ImageView от экрана с Long TextView?
1Кодированный пользовательский интерфейс UITestControlCollection в массив
1multiprocessing - Влияние числа на процесс на время обработки
0fieldset не полностью отображается вокруг div
0с помощью C ++ вы можете установить выходной каталог в поле ввода веб-страницы?
1Хранение данных датчика и дамп файла событий на Android
1У меня проблема с использованием onMarkerClickListeners. Я новичок, и появляется сообщение об ошибке, которое говорит о пропущенном операторе возврата
0Получение значения CSS и его обновление в SQL
1Невозможно запустить приложение на Android 7.1.2 через appium в Eclipse
1Parcelable обнаружил IOException при записи сериализуемого объекта во Fragment
1Модель слежения / изображение исчезают при включенной автофокусировке
0как уменьшить строки JavaScript вместо повторения
0Мой текст вращается, но фоновое изображение не
0Как использовать .bind (), чтобы связать значение этого?
1Как изменить ширину полосы прокрутки в WPF?
1Как установить высоту штрих-кода как 25 мм
1Шаг через сторонний код в Eclipse
0массив к строке на вставке PDO
0Как настроить работу cron Magento (1.8.1) в Cpanel
0Индексирование должно быть ускорено
1Кратчайший путь от города 0 до N (автомобильным / воздушным смешанным тарифом)
0Программа SFML 2.1 работает нормально в режиме отладки, но вылетает в режиме выпуска
0Запустите .exe файл кода C, используя Eclipse
1повторить сегмент кода несколько раз с разными интервалами
1как sys.getsizeof () дает другой результат [duplicate]

В то время как вы не сказали, в чем проблема, мы должны держать вещи в рамках jQuery для всех намерений и целей. var formData = new FormData($('form#userform')); должно быть var formData = $('form#userform').serialize() - это гарантирует, что данные будут отправлены на сервер в виде строки вроде name=george&[email protected]&validated=1 Ohgodwhy 07 авг. 2012, в 02:15
Вы не можете загружать напрямую через javascript как угрозу безопасности, и политики на уровне браузера не позволят этого. Есть обходные пути, включающие вспышку, iframes, шестерни, розетки и другие различные техники. Но в целом, я думаю, что Flash - ваш лучший кандидат. Это также очень вероятно, почему вы не получаете никаких загрузок на работу. Да, форма будет публиковаться, но не вместе с файлом, как вы ожидаете, используя обычные средства AJAX. проверить plupload его загрузчик jquery, который очень простой в дизайне, но очень эффективный
за два дня такой вопрос задавали 3-4 раза
Несомненно, я уверен, что за последние два дня многие спрашивали об этом несколько десятков раз. Но говорить, эй, этот вопрос уже задавался, бесполезно, если вы получили ссылку на вопрос, на который уже был дан ответ, в форме «возможного дублирования», предоставьте это и будьте полезны
@chris Крис, кажется, у меня нет разрешения, чтобы установить его как обман
@chris Крис Нет. Нет вспышки. Никогда.
@ColeJohnson никогда не говорил, что вспышка была тебе, но это ответ. Это хороший запасной вариант для браузеров, которые не поддерживают компоненты HTML5. Но у него есть свои недостатки, как и у других решений лично. Я предпочитаю средства, совместимые с HTML5, когда это возможно.
Вот одна из причин, по которой я указал, что у plupload есть множество вариантов выбора, и он грациозно переходит на другие, когда предпочтение не поддерживается. Или, если вы хотите, чтобы он перешел на сбой, вы можете установить его. plupload довольно прост в настройке для тех, кто просто хочет преодолеть, казалось бы, небольшие препятствия, такие как загрузка файла
это работает с этим, но я не могу обработать, когда это успешно загружает $ ('input # userfile'). live ('change', function () {console.log ('upload'); $ ('form # userform'). ajaxForm ({ }).представить(); });

Gareth Parker · Answer 1 · 2012-08-07T04-43-00.000Z

Вот как я это делаю. Если вам нужна дополнительная информация, а не только мой вставленный код, ознакомьтесь с этим http://www.html5rocks.com/en/tutorials/file/dndfiles/, потому что мой код был создан для перетаскивания файлов

        handleFiles : function(files, evt, target)
        {
            console.log(target);
            $.each(files, function(index, value)
            {
                var file = value;

                reader = new FileReader();
                reader.onload = function(evt)
                {
                    var li = $("<li class='uploading'><img data-image-id='0' src='" + evt.target.result + "' /></li>");
                    target.find('.imagesList').append(li);

                    var request = new XMLHttpRequest();
                    var formData = new FormData();
                    formData.append('image', file);

                    request.open("Post", settings.uploadImageUrl);
                    request.addEventListener("load", function(evt)
                    {
                        var id = evt.target.responseText;
                        li.removeClass('uploading');
                        li.find('img').attr('data-image-id', id);

                    }, false);
                    request.send(formData);
                };

                reader.readAsDataURL(value);

            });
        },