javascript - 无法访问通过 jQuery AJAX 上传的文件

Question

概述

我有一个伪装成按钮的标签，用户可以在其中上传图像文件以供系统读取。

问题

文件未发送或无法通过 PHP 访问。

代码

HTML:

<form id='qr-reader' method='post' action='inc/qr-upload.php'>
    <input type='file' capture='camera' accept='image/*' id='cameraInput' name='cameraInput' style='width:0.1px;height:0.1px;opacity:0;position:absolute;overflow:hidden;z-index:-1;'>
    <label for='cameraInput' class='btn btn-primary btn-block'><span class='glyphicon glyphicon-qrcode'></span></label>
</form>

JavaScript/jQuery:

$(function(){
    $(document).on("change", "#cameraInput", function(){
        var $form = $("#qr-reader");
        var $el = $("#cameraInput");
        var file = $el.prop("files");

        //Check file is associated
        if(file[0].name==""||$el.val()=="") return;

        //Submit file
        var file = new FormData($form[0]);
        $.ajax({
            url: "inc/qr-upload.php",
            type: "post",
            data: file,
            contentType: false,
            processData: false,
            success: function(r){
                console.log(r);
            }
        })
    });
})

PHP (inc/qr-upload.php):

<?php

var_dump($_FILES);
var_dump($_POST);

if($_SERVER["REQUEST_METHOD"]=="POST" && isset($_FILES["cameraInput"]["type"])){
    $sourcePath = $_FILES["cameraInput"]["tmp_name"];
    $newName = hash_file("md5", $_FILES["cameraInput"]["tmp_name"]);
    $targetPath = "../qr/$newName";
    if(move_uploaded_file($sourePath,$targetPath)) exit($newName);
        else exit("error");
} else exit("invalid");

期望的结果

我应该在 var_dump 输出之一中看到该文件(和临时文件名)，并且该文件应该上传以输出新文件名。

实际结果

我只看到两个空数组(一个用于 $_FILES，另一个用于 $_POST)。 if 语句不会触发，因此输出为“invalid”。

Answer 1

您正在创建 FormData()，但未在请求中发送它。将 data: file 添加到 AJAX 请求属性。

//Submit file
var file = new FormData($form[0]);
$.ajax({
    url: "inc/qr-upload.php",
    type: "post",
    data: file, // < add this here
    contentType: false,
    processData: false,
    success: function(r){
        console.log(r);
    }
})