Question

与此同时，我陷入了这个问题。通常情况下，它很简单但不知何故它不适用于我正在尝试做的事情。我希望通过Jquery或JS从我的表单输入字段中获取所有数据，然后通过AJAX将它们发送到服务器端脚本（PHP）。即使使用append或通过序列化来执行，我也只从ID #file的输入字段中获取对象。我没有使用提交按钮来确认上传的图像 - 只选择文件并将其发送出去。

我已经尝试过添加

formdata.append（“_ token”，document.getElementById（'_ token'）。val（））;

但每当我尝试将另一个元素附加到formdata时，整个脚本就会停止工作

使用$（'＃picUploadForm'）。serialize（）;我没有从ID #file的输入元素中获得任何结果。

HTML：

<form enctype="multipart/form-data" id="picUploadForm">
   <input type="file" name="file" id="file" style="display:none;" >
   <input type="hidden" name="_token" id="_token" value="<?php echo $_SESSION['_token']; ?>" />
</form>
<!-- Default Avatar Image -->
   <div class="click-slide overlay">
<!-- Profile Image-->
   <img src="<?php if(isset($avatar['filelink']) && $avatar['filelink'] !='') { echo $avatar['filelink']; } else { echo "assets/images/avatars/default_avatar_large.png"; }?>" alt="" class="img-full-width-tight" id="imagePreview" />
<!-- Image update link -->
    <div id="editLink" >
      <span>
        <a href="javascript:void(0);" class="pop-inline ti ti-image" ></a>
       </span>
    </div>
</div><!--/ click-slide-->

JS：

//On select file to upload
 $('#file').on('change', function(e){

      e.preventDefault();
      var formdata = new FormData();
     // any other code here....

            } else {

            // Upload Image to backend

          formdata.append("file", document.getElementById('file').files[0]);

// formdata.append("_token", document.getElementById('_token').val()); // does not work!!!

// $('#picUploadForm').serialize(); // only returns data from input #_token


            $.ajax({
            url: "./serversided.php",
            type: "POST",
            data: formdata,
            dataType: 'json',
            cache: false,
            contentType: false,
            processData: false,      
            beforeSend: function(){
                $("#statusav").removeClass().html('');
                $('.overlay').LoadingOverlay("show");
                HideLoadingOverlay();   
            },
            success: function(data){
                if(data.status === true){

                    // alert(data.imgURL);
                    setTimeout(function(){$("#statusav").removeClass('alert alert-danger').addClass('alert alert-success').html(data.reply)}, 2000);
                    $("#imagePreview").attr('src', data.imgURL);

              } else {

                    // alert(data.error);
                    setTimeout(function(){$("#statusav").removeClass('alert alert-success').addClass('alert alert-danger').html(data.error)}, 2000);

          }
        }
    });
   }
});

Answer 1

.val()是一个jQuery方法 - 它不是一个vanilla JS方法，因此在普通元素上调用它时不起作用。 document.getElementById将返回一个元素（或null）; $('selectors here')将返回一个jQuery对象，您可以在其上使用jQuery函数。

尝试使用vanilla JS：

formdata.append("_token", document.querySelector('#_token').value);

或者用jQuery选择元素并使用jQuery方法：

formdata.append("_token", $('#_token').val());

通过jquery / js输入字段获取所有表单数据ajax

1 个答案: