上传图像使用formdata ajax发送到php - upload image using formdata ajax send to php

upload image using formdata ajax send to php

本文关键字：php ajax formdata 图像 | 更新日期: 2023-09-27

我是这个网页区域的新手，我试图通过使用ajax将图像上传到我的文件并将其发送到php。但是我在这里写了一些代码。有人能纠正我的错误吗?这是我的表单文件上传和一个按钮

<form method="post" enctype="multipart/form-data"  action="">
    <input type="file" name="images" id="images" multiple="" />
    <input type="submit" value="submit" id="harlo">
</form>

一旦我点击按钮，文件将发送到这里，并接收src和ajax到php文件但我猜是为了解决源头问题。需要有人帮我纠正一下。

(function upload() {
    var input2 = document.getElementById("harlo"), 
    formdata = false;

    if (window.FormData) {
        formdata = new FormData();
    }
    input2.addEventListener("click", function () {
        var i = 0, len = $('input[type="file"]')[0].files;
        for ( ; i < len.length; i++ ) {
            file = len.files[i];
            if (formdata) {
                formdata.append("images", file);
            }
        }
        if (formdata) {
            $.ajax({
                url: "upload.php",
                type: "POST",
                data: formdata,
                processData: false,
                contentType: false,
                success: function (res) {
                    document.getElementById("response").innerHTML =  res; 
                }
            });
        }
    }, false);
}());
<?php
    foreach ($_FILES["images"]["error"] as $key => $error) {
        if ($error == UPLOAD_ERR_OK) {
            $name = $_FILES["images"]["name"][$key];
            move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "uploads/" . $_FILES['images']['name'][$key]);
        }
    }
    echo "<h2>Successfully Uploaded Images</h2>";
?>

使用如下格式:

$("form").on("submit", function(
    // Your ajax request goes here
    $.ajax({
        url: "upload.php",
       type: "POST",
       data: $("form").serialize(),
       processData: false,
       contentType: false,
       success: function (res) {
          $("#response").innerHTML = res;
       }
    });
    return false;
));

但是似乎有一个问题，通过ajax发送文件。因为它们被serialize()方法遗漏了，因为JS无法访问用户计算机上的文件内容。因此，必须将表单发送到服务器以获取文件数据。

请看这里:https://stackoverflow.com/a/4545089/1652031