通过序列化

时间:2017-02-08 14:35:57

标签: javascript php jquery ajax

我正在尝试创建一个表单,其中包含用户数据(名称,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>

Jquery代码

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代码

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

这里我没有获得image1值。我想得到图片的网址。

1 个答案:

答案 0 :(得分:0)

你需要FormData来实现它。

SOURCE

此外,您需要更改ajax调用中的一些内容(在上面的链接中解释)

contentType: false
cache: false           
processData:false

所以完整的电话会是:

$(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']

因为你在这里命名为'file':

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