Javascript 通过序列化发送图像url和数据

我正在尝试制作一个表单，其中包含用户数据（姓名、dob等）和图像。当用户提交表单时，将生成带有用户给定数据和图像的pdf。我可以成功序列化数据，但无法在pdf中获取图像。我使用简单的ajax post方法发布数据。下面是我的代码。
HTML代码

<form onsubmit="submitMe(event)" method="POST" id="cform">
<input type="text" name="name" placeholder="Your Name" required>
<input type="file" name="pic" id="pic" accept="image/*" onchange="ValidateInput(this);" required>
<input type="submit" value="Preview"/>
</form>

function submitMe(event) {

    event.preventDefault();
  jQuery(function($)
  {
  var query = $('#cform').serialize();
    var url = 'ajax_form.php';

    $.post(url, query, function () {

     $('#ifr').attr('src',"http://docs.google.com/gview?url=http://someurl/temp.pdf&embedded=true");

    });


  });

}

<?php
$name=$_POST['name'];
$image1=$_FILES['pic']['name'];
?>

PHP代码

<form onsubmit="submitMe(event)" method="POST" id="cform">
<input type="text" name="name" placeholder="Your Name" required>
<input type="file" name="pic" id="pic" accept="image/*" onchange="ValidateInput(this);" required>
<input type="submit" value="Preview"/>
</form>

function submitMe(event) {

    event.preventDefault();
  jQuery(function($)
  {
  var query = $('#cform').serialize();
    var url = 'ajax_form.php';

    $.post(url, query, function () {

     $('#ifr').attr('src',"http://docs.google.com/gview?url=http://someurl/temp.pdf&embedded=true");

    });


  });

}

<?php
$name=$_POST['name'];
$image1=$_FILES['pic']['name'];
?>

---

这里我没有得到image1的值。我想获取图像的url。

您需要FormData来实现它

此外，您需要更改ajax调用中的一些内容（在上面的链接中解释）

因此，完整的呼叫将是：

$(document).on('change','.pic-upload',uploadProfilePic);
#.pic-upload is input type=file

function uploadProfilePic(e){

var newpic = e.target.files;
var actual = new FormData();
actual.append('file', newpic[0]);


var newpic = e.target.files;
var actual = new FormData();
actual.append('file', newpic[0]);

$.ajax({
type:"POST",
url:"uploadpic.php",
data: actual,
contentType: false, 
cache: false,    
processData:false,
dataType:"json",   
success: function (response){
#Maybe return link to new image on successful call
} 
});
}

然后在PHP中，您可以这样处理它：

$_FILES['file']['name']

由于您在此处将其命名为“文件”：

actual.append('file', newpic[0]);

---

您不能像那样使用ajax上传文件。您需要一个

FormData

对象。例如，见“谢谢”@jeroen@jeroen你能告诉我如何访问php文件中通过ajax发送的每个数据吗？答案是thanx。我做了一些类似于“var form=$（“form”）[0]的事情；var formData=new formData（form）；'。你能告诉我如何访问php文件中的每个表单元素（文本、图像）吗。Thanx又来了。@Rana你在PHP中尝试过$_POST['pic']或$_POST['name']吗？我认为你需要使用append，这样你就可以设置PHP可以访问的键/值对（只需将它放在FormData中并发送给PHP会有问题）var FormData=new FormData（）；append（'myname'，$（'form'）[0]）；然后试试$_POST['myname']谢谢你。我试试看。