Плагин jQuery Form: enctype: multipart / form-data и file-upload - JSON не возвращается? - PullRequest
Новая
       36

Плагин jQuery Form: enctype: multipart / form-data и file-upload - JSON не возвращается?

1 голос
/ 20 февраля 2012

странная проблема или ошибка. Я использую плагин jQuery Form , и он прекрасно работает везде, где принимается в одной форме, где у меня есть одна загрузка файла с enctype:multipart/form-data в форме. В этой форме я сталкиваюсь с двумя странными вещами ...

  1. объект JSON, возвращаемый с сервера, пуст!
  2. В Opera кнопка «Отправить» даже запускает загрузку файлов!

Однако это происходит только тогда, когда я оставляю enctype:multipart/form-data и input type="file" в форме. Без этого все работает нормально, и объект JSON возвращается правильно - и в Opera нет загрузки.

HTML: 

<form accept-charset="UTF-8" action="/ajax/profiledetails" id="profileAboutMeForm" method="post" novalidate="novalidate" encoding="multipart/form-data" enctype="multipart/form-data">

    ...

    <p class="rel avatarUpload">
        <label class="label" for="profileAvatar">Choose Avatar</label>
        <img class="profileAvatar avatar30" src="" alt="user">
        <input class="fileUpload br3" id="profileAvatar" name="profile[avatar]" type="file">
    </p>

    ...

</form>

JQuery: 

$(formId).ajaxSubmit({
        type: "POST",
        cache: false,
        resetForm: reset,
        dataType: "text json",
        success: function(jsonObject, status) {

            console.log("status + ", jsonObject.status: "+ jsonObject.status + ", jsonObject.data: " + jsonObject.data);

Есть идеи, что может вызвать это? Как я мог это исправить?

Спасибо заранее.

редактирование:

Хотя я никогда не пытался зарегистрировать сам объект, и здесь выясняется, что в этом случае (только если задан file-input и enctype) jsonObject является STRING, а не объектом. 

if (typeof jsonObject == 'string')
        console.log('yes, it's a string'); //yes, it's a string
        jsonObject = JSON.parse(jsonObject);

console.log(jsonObject);

Итак, это означает, что у меня снова есть JSObject в моем javascript, и это исправляет мою первую проблему, однако оперная ошибка все еще остается! Есть идеи?

1 Ответ

1 голос
/ 21 февраля 2012

В качестве отправной точки, я предполагаю, что вы прочитали документацию по этому вопросу на странице плагинов по адресу http://jquery.malsup.com/form/#file-upload?. Вы не получите доступ к JSON в ajaxSubmit (), потому что ответ фактически записан вскрытый фрейм, используемый для загрузки.

"Поскольку невозможно загрузить файлы с помощью объекта браузера XMLHttpRequest, плагин формы использует скрытый элемент iframe, чтобы помочь с задачей. Это распространенная техника, но она имеет внутренние ограничения.Элемент iframe используется в качестве цели операции отправки формы, что означает, что ответ сервера записывается в iframe. Это хорошо, если тип ответа - HTML или XML, но не работает так же, если тип ответа - сценарий.или JSON, оба из которых часто содержат символы, которые должны быть представлены с использованием ссылок на сущности при обнаружении в разметке HTML.

Чтобы учесть проблемы сценариев и ответов JSON, плагин формы позволяет встраивать эти ответы вэлемент textarea, и рекомендуется делать это для этих типов ответов, когда они используются в сочетании с загрузкой файлов. Обратите внимание, однако, что если в форме нет ввода файла, тогда запрос использует обычный XHR для отправки формы (неiframe). Это ставитОбязанность вашего кода сервера знать, когда использовать текстовую область, а когда нет.Если хотите, вы можете использовать опцию iframe плагина, чтобы заставить его всегда использовать режим iframe, и тогда ваш сервер всегда может встроить ответ в текстовую область. "

Вот код, который ониспользует на странице примеров: 

<code>$('#uploadForm').ajaxForm({
  beforeSubmit: function(a,f,o) {
    o.dataType = $('#uploadResponseType')[0].value;
    $('#uploadOutput').html('Submitting...');
  },
  success: function(data) {
    var $out = $('#uploadOutput');
    $out.html('Form success handler received: <strong>' + typeof data + '</strong>');
    if (typeof data == 'object' && data.nodeType)
      data = elementToString(data.documentElement, true);
    else if (typeof data == 'object')
      data = objToString(data);
    $out.append('<div><pre>'+ data +'
');}});

Для вас здесь важен метод success ... обратите внимание, что он пишетвозврат data на страницу для отладки.

...