无法访问通过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);
    }
})

Answer 2

编辑： data: file

$(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: $('#cameraInput').val(),
                contentType: false,
                processData: false,
                success: function(r){
                    console.log(r);
                }
            })
        });
    })

Answer 3

更改JS文件：

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

        $.ajax({
            url: "inc/qr-upload.php",
            type: "post",
            data: new FormData(this),
            contentType: false,
            processData: false,
            success: function(r){
                console.log(r);
            }
        })
    });
})