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

仅供将来需要它的人使用。

上面的代码工作得很好，那些该死的解析错误让我失望了。最后调试成功。

Ajax 上传图片不提交表单

Ajax upload image without form submit

jquery

ajax

image

upload

submit