使用FormData()附加数据元素的jQuery ajax帖子在发布后无法找到附加的数据元素

时间:2017-06-05 01:12:29

标签: php jquery html ajax

我使用talkerscode.com中的代码通过拖放实现文件上传。代码正在运行。现在我想在同一个ajax帖子中添加额外的输入值。我添加了一个名为" user_id"的输入标签。在以下HTML代码中。然后我将元素追加到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();
  }
 }
}
?>


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

1 个答案:

答案 0 :(得分:0)

2017-06-05T01:50:13.761150+00:00 app[web.1]: > NODE_ENV=production node ./server/server.prod.js
2017-06-05T01:50:14.231853+00:00 app[web.1]: /app/node_modules/firebase-admin/lib/auth/credential.js:129
2017-06-05T01:50:14.231876+00:00 app[web.1]:             throw new error_1.FirebaseAppError(error_1.AppErrorCodes.INVALID_CREDENTIAL, 'Failed to parse private key: ' + error);
2017-06-05T01:50:14.231877+00:00 app[web.1]:             ^
2017-06-05T01:50:14.231878+00:00 app[web.1]:
2017-06-05T01:50:14.231878+00:00 app[web.1]: Error: Failed to parse private key: Error: Invalid PEM formatted message.
2017-06-05T01:50:14.231883+00:00 app[web.1]:     at FirebaseAppError.FirebaseError [as constructor] (/app/node_modules/firebase-admin/lib/utils/error.js:39:28)
2017-06-05T01:50:14.231884+00:00 app[web.1]:     at new FirebaseAppError (/app/node_modules/firebase-admin/lib/utils/error.js:84:23)
2017-06-05T01:50:14.231885+00:00 app[web.1]:     at new Certificate (/app/node_modules/firebase-admin/lib/auth/credential.js:129:19)
2017-06-05T01:50:14.231886+00:00 app[web.1]:     at new CertCredential (/app/node_modules/firebase-admin/lib/auth/credential.js:195:33)
2017-06-05T01:50:14.231887+00:00 app[web.1]:     at Object.cert (/app/node_modules/firebase-admin/lib/firebase-namespace.js:189:58)
2017-06-05T01:50:14.231887+00:00 app[web.1]:     at Object.<anonymous> (/app/server/firebase/index.js:16:33)
2017-06-05T01:50:14.231888+00:00 app[web.1]:     at Module._compile (module.js:569:30)
2017-06-05T01:50:14.231888+00:00 app[web.1]:     at Object.Module._extensions..js (module.js:580:10)
2017-06-05T01:50:14.231889+00:00 app[web.1]:     at Module.load (module.js:503:32)
2017-06-05T01:50:14.231889+00:00 app[web.1]:     at tryModuleLoad (module.js:466:12)

自:

 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());