Ajax загрузить изображение без отправки формы - PullRequest
Новая
       22

Ajax загрузить изображение без отправки формы

0 голосов
/ 20 апреля 2020

Хорошо ... У меня нет идей, и мне нужен кто-то, чтобы осветить меня.

Я пытаюсь загрузить файл из элемента INPUT в файл php (обработчик. php) используя Ajax, и я, кажется, что-то упустил. Я потратил на это часы и попробовал много вариантов, но безуспешно ... Я официально сдаюсь ...

Я максимально упростил код, может кто-нибудь сказать мне, что мне не хватает?

Большое спасибо

Вот сценарий 

                <script>
                function readURL(fid,input,mxsize,fh,fw) {
                      var form_data = new FormData();
                      form_data.append('img', $('#file_header')[0].files[0]);
                      $.ajax({
                        url:"handler.php",
                        type:"POST",
                        data: form_data,
                        contentType: false,
                        cache: false,
                        processData: false,
                        beforeSend:function(){
                         $('#loader-message-header').html("<label>Image Uploading...</label>");
                         $('#loader-message-header').show();
                        },   
                        success:function(data){
                         alert(data);
                        },
                        fail: function(){
                         $('#loader-message-header').html("<label>Connection to the server lost</label>");
                        }
                      });
               }
            </script>

HTML

<form id="register_form" class="mu-reservation-form ">
<input id="file_header" class="file-upload-input" type='file' onchange="readURL(this);" accept="image/*" />
<img class="file-upload-image" src="../assets/img/register/SRP-header.jpg" />
<div id="loader-message-header" class="loader-message"></div>

И CSS

.file-upload-input {
                position: absolute;
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
                outline: none;
                opacity: 0;
                cursor: pointer;
              }

              .image-upload-wrap {
                margin-top: 20px;
                position: relative;
                background-color:#c1a35f;
              }

              .image-upload-wrap:hover{
                opacity: 0.6;
                filter: alpha(opacity=60);
              }
              .loader message{
                display:none; 
              }

1 Ответ

0 голосов
/ 22 апреля 2020

Только для тех, кому это понадобится в будущем.

Приведенный выше код работал просто отлично, эти чертовы ошибки синтаксического анализа меня достали. Закончилась отладка успешно.

...