通過序列化發送圖像URL和數據

Question

我試圖做一個表單，其中將有用戶數據（名稱，dob等）和圖像。 當用戶提交表單時，將使用給定的數據和圖像生成pdf。 我可以成功序列化數據，但無法在pdf中獲取圖像。 我正在使用簡單的ajax發布方法來發布數據。 下面是我的代碼。
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值。 我想獲取圖像的URL。

Answer 1

您需要FormData來實現它。

資源

此外，您需要在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']

因為您在這里將其命名為“文件”：

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