javascript - 将照片从 javascript 发送到 php

Question

我正在尝试使用 ajax 将照片从 javascript 发送到 php。我在 html 中有这个输入:

<input type="file" class="input-field" id="photo" name="photo">

JavaScript 中的这个:

var photo = document.getElementById("photo").value;

这是在 php 中:

$photo_location = $_FILES['photo']['tmp_name'];

我正在使用 ajax post 在 php 中发送照片和一些其他数据。除了照片之外，所有其他数据都在 php 中正确接收。 getelementbyid .value 方法是否会导致照片错误？我从 php 收到错误未定义索引照片。

xmlhttp.open("POST", "ajaxpost.php");
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    var payload = "name=" + name + "&price=" + price + "&quantity=" + quantity + "&description=" + description + "&photo=" + photo;
    payload = payload.replace("%20", "+");
    payload = payload.replace("%3D", "=");

    xmlhttp.send( payload );

    return false;

Answer 1

错误是您将文​​件作为普通输入发送，因此 php 会在 $_POST 而不是 $_FILES 中接收它。

你可以使用 FormData 来做到这一点，如下所示:

var photo = document.getElementById("photo");

var data=new FormData();
//from inputs
data.append(photo.name,photo.files[0]);
data.append('name',name);
data.append('price',price);
data.append('quantity',quantity);
data.append('description',description);

var xmlhttp=new XMLHttpRequest()
xmlhttp.open("POST", "ajaxpost.php");
xmlhttp.send(data);