没有表单提交的Ajax上传图像

Question

好吧...我没主意了，需要有人启发我。

我正在尝试使用Ajax将文件从INPUT元素上传到php文件（handler.php），而我似乎丢失了一些东西。我已经花了几个小时并尝试了许多变体，但是没有成功...我正式给出...

我将代码简化到最大程度，有人可以告诉我我所缺少的内容吗？

非常感谢

这里是脚本

                <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; 
              }

Answer 1

仅适用于将来需要它的任何人。

上面的代码工作得很好，那些该死的解析错误使我明白了。最终调试成功。