Загрузка изображения после проверки JQuery с использованием AJAX - PullRequest
Новая
       17

Загрузка изображения после проверки JQuery с использованием AJAX

0 голосов
/ 27 августа 2018

Я использую CodeIgniter. Я пытаюсь загрузить изображение с помощью AJAX после проверки jquery, но это не работает. Проверка Jquery работает, если поле пусто. После заполнения всех полей и нажатия кнопки «Отправить» моя страница обновилась. Это не вызов контроллера.

Не могли бы вы мне помочь? 

$("#primary").validate({
    errorElement: 'div',
    rules: {
        first_name: {
            required: true,
            alphabets: true,
            minlength: 3
        },
        last_name: {
            alphabets: true            
        },
        profile_pic: {
            extension: "png|jpeg|jpg|gif"                      
        },
    },

    messages: {
        profile_pic: {
            extension: "Only PNG , JPEG , JPG, GIF File Allowed",
        },  
    },

    submitHandler: function(form)
    {
      var formData = new FormData(this);

            $.ajax({
                url: baseUrl + "/AddMember/addMembers",
                type: 'POST',
                //data: $('#primary').serialize(),
                data:formData,
                dataType: 'json',
                success: function(data) 
         {                  
            if (data.error == "true")
            {           
             //success message
            } 
          else {
               //error message
               }
          }

            });
    }

});

Код контроллера 

    $config=['upload_path'   =>'./uploads/images',
             'allowed_types' =>'gif|jpg|png|jpeg',
             'file_name'     =>uniqid().time().date("dmy")
             ]; 
            if ($this->upload->do_upload('profile_pic'))
            {
            $profile_pic_set = $this->upload->data('file_name');
            }
            else{$profile_pic_set = "";//set empty value if user not uploading any image
 }
                $this->load->library('upload', $config);
                $data = array(
                  'first_name'  =>  trim($this->input->post('first_name')),
                  'last_name'   =>  trim($this->input->post('last_name')),
                  'profile_pic' =>  $profile_pic_set
                   );   
                    print_r($data); //here I am getting profile_pic empty.

HTML 

    <?php echo form_open_multipart('','id="primary"'); ?>
              <input type="text" name="first_name" id="first_name" class="form-control"  placeholder="First Name">
              <input type="text" name="last_name" id="last_name" class="form-control"  placeholder="Last Name">
<input type="file" name="profile_pic" id="file_upload">
              <button type="submit" class="btn btn-primary btn_new">Submit</button>
              <?php echo form_close(); ?>

1 Ответ

0 голосов
/ 27 августа 2018

TypeError: Аргумент 1 в FormData.constructor не реализует интерфейс HTMLFormElement

Ваша проблема внутри FormData(this). this представляет сам валидатор, а не объект формы. Объект формы представлен аргументом form, который передается в submitHandler.

Так что FormData() должен содержать аргумент form.

Также необходимо установить для параметров Ajax processData и contentType значение false ... 

submitHandler: function(form){
    var formData = new FormData(form);
    $.ajax({
        url: baseUrl + "/AddMember/addMembers",
        type: 'POST',
        data: formData, 
        dataType: 'json',
        processData: false,
        contentType: false,
        ....

Ссылки

Отправка изображения с помощью ajax с использованием валидатора jquery на submitHandler

TypeError: 'append' вызывается для объекта, который не реализует интерфейс FormData

Решение: https://stackoverflow.com/a/25390646/594235

...