Отправить форму (django-form) с Imagefield через JQuery/Ajax Post?

У меня возникли проблемы с отправкой формы (Django-form) с полем изображения с JQuery/ajax POST. Im возвращающ «ошибки поля» ошибки изображения на поле изображения.Отправить форму (django-form) с Imagefield через JQuery/Ajax Post?

Я пробовал различные решения с добавлением formData но без результатов до сих пор. Я на правильном пути? Пожалуйста, укажите мне в правильном направлении. Спасибо!

Обновление: Я могу установить ImageField к необходимости = ложь, а не получить ошибку проверки, но я хочу, чтобы поле требуется, и кажется, что форма еще не представляет изображение ..

Основной функция выглядит следующим образом:

$(function() { 
    $('#imageupload').on('click', function() { 

     $('#dialog-modal').load('upload/ #myform'); 

     $('#dialog-modal').dialog({ 
       height: 550, 
       width: 280, 
       modal: true, 

       buttons: { 
        Send: function() { 
         var dialog = $(this), 
          form = $('#myform'), 
          data = form.serialize(); 

        $('.off').remove(); 

        $.ajax({ 
         url: 'upload/', 
         data: data, 
         type: 'post', 

         success: function(response) { 
          res = $.parseJSON(response); 

          if (res['status'] == 'OK') { 
           alert('Thank you!'); 
           dialog.dialog('close'); 
          } 

          else if (res['status'] == 'bad') { 
           alert('Please try again!'); 
           delete res['status'] 
           var errors = res; 

           $.each(errors, function(key, value) { 

            var err = $('<span></span>', { 
                'class': 'off', 
                'text': value 
              }), 
             br = $('<br></br>', { 
              'class': 'off', 
             }), 
             input = $('#id_'+key).parent(); 

            br.appendTo(input); 

            err.appendTo(input); 

            err.css('color', 'red').css('font-size', '10px'); 

           }); 
          } 
         } 

         }); 

        } 
        } 
      }); 


    }); 
})

форма выглядит так, что она находится в детской HTML Wich загружается в окне JQuery диалоговое/модальный:

<form method="post" id='myform' enctype="multipart/form-data"> 
    {% csrf_token %} 
    <h1> Upload </h1> 
    <p><label for="name">Name:</label></p> 
    <div class="fieldWrapper"> 
    {{ form.name }} 
    </div> 
    <br> 
    <p><label for="type">Type:</label></p> 
    <div class="fieldWrapper">     
    {{ form.type }} 
    </div> 
    <br> 
    <p><label for="description">Description:</label></p> 
    <div class="fieldWrapper"> 
    {{ form.description }} 
    </div> 
    <br> 
    <p><label for="picture">Picture:</label></p> 
    <div class="fieldWrapper">     
    {{ form.picture }} 
    </div> 
    </form>

источник

2014-02-01 user3199840

Да, на самом деле, кажется, что загрузка файлов через ajax не поддерживается. Есть несколько [плагинов] (http://www.phpletter.com/Demo/AjaxFileUpload-Demo/) и [примеры] (http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with -ajax /), которые показывают, как обойти это ограничение. Попытайтесь понять, как их использовать. Если вы не найдете решения, я выясню это, когда найду время – yuvi

Хорошо.Да, я видел, как некоторые говорят об этом, но также и многие люди, которые утверждают, что это возможно (что было немного запутанным). Одним из способов должно быть что-то, называемое formData, которое я пытался с последними днями без каких-либо хороших результатов. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest?redirectlocale=en-US&redirectslug=DOM%2FXMLHttpRequest%2FUsing_XMLHttpRequest#Submitting_forms_and_uploading_files Но я попробую подробнее о подключаемых модулях и посмотрю ! – user3199840

Мне оказалось проще, чем я думал, используя плагин malsup. – yuvi

Там очень известная проблема загрузки файлов через JQuery AJAX. Есть tons of solutions and plugins out there, большинство из них использует an iframe. Тем не менее, я считаю, что malsup jQuery form plugin обеспечивает самый простой из всех, только с небольшими изменениями в код:

добавить внутри <head> тег:

<script src="http://malsup.github.com/jquery.form.js"></script>

изменения кода в Send функции, как так:

buttons: { 
    Send: function() { 
     $('.off').remove(); 
     var dialog = $(this), 
      options = { 
       url: 'upload/', 
       type: 'POST', 
       success: function(response) { 
        // everything the same in here 
        } 
       }; 

     $('#myform').ajaxSubmit(options); 

    } 
    }

Конечно, на серверной стороне необходимо указать follow the instructions из документации о том, как привязать файлы к вашей форме. Для наиболее простого использования, как правило, сводится к следующему:

form = UploadForm(request.POST, request.FILES)

p.s. последнее замечание - как уже упоминалось, это известная проблема, и решение от malsup использует что-то под названием XMLHttpRequest Level 2. Это просто новый API, который обеспечивает больше возможностей для запросов AJAX, таких как загрузка файлов, передача информации о ходе и возможность отправки данных формы. Моя точка зрения: , поэтому учтите, что если вы хотите, чтобы пользователи устаревшего браузера использовали ваш сайт, вам нужно найти альтернативу.

источник

2014-02-03 21:03:26 yuvi

Я пытаюсь заставить это работать! Не совсем там. Но я оптимист! Много} и}; прямо сейчас, что должно быть в нужных местах! Я даю вам знать, как это работает! Спасибо за ваш полный ответ! – user3199840

Наконец-то !! Оно работает! Сейчас мне действительно все равно, поддерживают ли старые браузеры. Так рада, что это работает! Не могу поблагодарить вас за этого человека! – user3199840

похоже, у вас есть requi красный атрибут в поле изображения, и вы не останавливаете поведение по умолчанию для функции щелчка.

$('#imageupload').on('click', function(e) { 
    e.preventDefault();

Bit трудно сказать без вашего HTML коды ... в идеале Вы должны использовать форму с идентификатором, то целью этого элемента привязкой к событию «Submit» так клавиша ввод и сенсорные события также обрабатывается такой же код.

$('#imageform').on('submit', function (e){ e.preventDefault() // other code here }

Смотрите также: Ajax Upload image

источник

2014-02-01 21:43:22 sidhuko

Хорошо. Спасибо за ответ. Не думайте, что это необходимо, но даже если это было, это должно было пройти эту ошибку, если я выбрал файл для загрузки (?). Это моя идея. Чтобы вы могли опубликовать фотографию, и если вы сделаете это поле, вы должны пройти проверку. Я попытаюсь с предотвращением по умолчанию. – user3199840

Отправить форму (django-form) с Imagefield через JQuery/Ajax Post?

ответ

Смежные вопросы