使用FormData（）附加数据元素的jQuery ajax发布在发布后找不到附加的数据元素

Question

我使用来自talkerscode.com的代码通过拖放来实现文件上传。 该代码正在运行。 现在，我想在同一ajax帖子中添加其他输入值。 我在以下html代码中添加了一个名为“ user_id”的输入标签。 然后将元素添加到formdata对象中。 更改之后，拖放上载仍然有效，但是PHP代码抱怨未定义$ _POST [“ user_id”]。 这是我的代码。 请帮忙！

<html>
<!-- code original from talkerscode.com -->
<head>
<link rel="stylesheet" type="text/css" href="upload_style.css">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="wrapper">
<input type="text" name="user_id", id="user_id" value="1228">
<input type="file">
<div id="drop-area">
 <h3 class="drop-text">Drag and Drop Images Here</h3>
 </div>
</div>
</body>
</html>

<script>
$(document).ready(function()
{
 $("#drop-area").on('dragenter', function (e){
  e.preventDefault();
  $(this).css('background', '#BBD5B8');
 });

 $("#drop-area").on('dragover', function (e){
  e.preventDefault();
 });

 $("#drop-area").on('drop', function (e){
  $(this).css('background', '#D8F9D3');
  e.preventDefault();
  var image = e.originalEvent.dataTransfer.files;
  createFormData(image);
 });
});

function createFormData(image)
{
 var formImage = new FormData();
 formImage.append('userImage', image[0]);
 formData.append('user_id', $('#user_id').val());
 uploadFormData(formImage);
}

function uploadFormData(formData)
{
 $.ajax({
 url: "upload_image.php",
 type: "POST",
 data: formData,
 contentType:false,
 cache: false,
 processData: false,
 success: function(data){
 $('#drop-area').html(data);
 }});
 }
 </script>

 ----------------PHP code -------------------

<?php
    if(is_array($_FILES))
    {
     if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {
     $sourcePath = $_FILES['userImage']['tmp_name'];
     $targetPath = "images/".$_FILES['userImage']['name'];
     if(move_uploaded_file($sourcePath,$targetPath)) {
?>
   <img src="<?php echo $targetPath; ?>">
   <p> user_id = <?php echo $_POST["user_id"] ?> </p>
   <?php
   exit();
  }
 }
}
?>


-----------------------------------------------

Answer 1

 function createFormData(image) {
  var formImage = new FormData();
  formImage.append('userImage', image[0]);
  formData.append('user_id', $('#user_id').val()); //change formData to formImage
  uploadFormData(formImage);
 }

从：

  formData.append('user_id', $('#user_id').val());

至：

  formImage.append('user_id', $('#user_id').val());

使用FormData（）附加数据元素的jQuery ajax发布在发布后找不到附加的数据元素

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-06-05 02:10:04

使用FormData（）附加数据元素的jQuery ajax发布在发布后找不到附加的数据元素

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-06-05 02:10:04

解决方案1
0 已采纳 2017-06-05 02:10:04