AJAX PHP 图片上传不起作用，$_FILES 为空？

Posted 2023-05-08

【中文标题】AJAX PHP 图片上传不起作用，$_FILES 为空？

【英文标题】：AJAX PHP Image upload not working, $_FILES empty?

【发布时间】：2020-03-12 08:35:48

【问题描述】：

我已经尝试研究几乎所有内容，但我没有找到修复代码的最终解决方案。正如您在调试图像中看到的那样，可以读取文件道具。在 php 中，print_r($_FILES); exit; 的结果是一个空数组。问题似乎是event.preventDefault();。提交必须是prevent，但文件仍需生成。

JS

    $("#cardgeneratorForm").on("submit", function (event) 
        event.preventDefault();

        var artworkimageinput = $('#inputPicture').prop('files')[0];
        var artworkimage = new FormData();
        artworkimage.append('file', artworkimageinput); 

                $.ajax(
                    url: 'generatecard.php',
                    method: 'POST',
                    data: 
                        artworkimage: artworkimage,
                    ,
                    cache: false,
                    processData: false,
                    contentType: false,
                    success : function(filename)
                    ,
                    fail: function()
                    
                ); 

PHP

    <?php
    if ($_SERVER["REQUEST_METHOD"] == "POST")
    
    move_uploaded_file($_FILES['file']['tmp_name'], 'artwork/' . $_FILES['file']['name']); 
    

html

<form class="cardgeneratorForm" id="cardgeneratorForm" method="post" enctype="multipart/form-data" action="generatecard.php">
                                    <div class="inputPicture-container custom-file col-12">
                                        <input type="file" name="file" class="custom-file-input" accept='.jpg, .jpeg, .png, .webp' id="inputPicture" lang="en">
                                        <label class="custom-file-label" for="inputPicture">Card Picture</label>
                                    </div>

     <button class="btn btn-primary btn-block btn-xs reset-button">
                                            <span><i class="fas fa-redo"></i>Reset</span>
                                        </button>
</form>

【问题讨论】：

前 3 行代码需要在提交处理程序中

你是对的，他们是，实际上我写的有点复杂，因为代码要大得多，我试图将它缩短为相关代码。我编辑了它！

【参考方案1】：

您可以这样做。

$('#cardgeneratorForm').on('submit',function(e) 
    e.preventDefault();

    var formData = new FormData(this);

    $.ajax(
        method:$(this).attr('method'), //dynamically getting the method of the form
        url: $(this).attr('action'), //dynamically getting the action of the form
        data:formData,
        cache:false,
        contentType: false,
        processData: false,
        success:function(data)
            console.log("success");
            console.log(data);
        ,
        error: function(data)
            console.log("error");
            console.log(data);
        
    );
);

选择文件后立即开始上传（可选）

$("#inputPicture").on("change", function() 
    $("#cardgeneratorForm").submit();
);

我删除了一些额外的括号，现在它可以工作了。

希望对你有帮助！！

【讨论】：

这没有帮助，它具有相同的结果。 preventDefault 阻止它工作。 $_FILES 仍然是空的。

@DappFuture 我刚刚编辑了我的答案。现在检查我的答案。我删除了代码中有一些额外的括号，现在它正在工作。这里preventDefault没有什么问题，因为这里是用来防止正常的表单提交，所以我们可以通过AJAX上传文件asynchronously。

我试过了，但它不起作用，我不知道为什么。还在检查。 $_FILES / $_FILES['file']['name'] 对我来说是空的。

@DappFuture 刚刚为您录制了一个视频教程，以便您可以跟随并使其发挥作用。 youtu.be/xF9Xws5LqwE

感谢我没想到的视频。我还不确定是什么问题，但我将此部分外包给了另一个 ajax 调用，它的工作方式与您编写它的方式相同。但是在我现有的 ajax 调用中它不起作用，我仍然需要弄清楚。但我没有提到的是我的 ajax 调用在这里面，这可能会导致问题：“html2canvas(document.getElementById('card-build'),backgroundColor: null, scrollX: 0, scrollY: -window.scrollY) .then(function(canvas) "

【参考方案2】：

使用 ajaxform 插件，你可以在这里找到一个例子 example ajaxform

<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
        $(document).ready(function() 
         //   document.getElementsByName('userid')[0].value=" request.session.user_id ";
            $(".createnews").click(function()
                $("#formdata").ajaxForm(target: '#diagshow');
            );
        );
</script>

【讨论】：

我不能使用这样的插件。我的代码比我发布的要复杂一些，我只需要按照我在帖子中尝试的方式修复图片上传即可。

我之前尝试过使用 ajax 上传图像+数据，但直到我使用了这个 js 插件后才成功

我的代码已经包含一个图片上传和 sql insert 可以正常工作，但是第一个图片上传是通过 base64 上传的，第二个只是来自输入的图片，因为 php var 是空的，所以它不起作用。 $image = $_POST['image']; $位置=“卡/”； $image_parts = explode(";base64,", $image); $image_base64 = base64_decode($image_parts[1]); file_put_contents($fullfilename, $image_base64);

是的空变量，因为要通过表单发送文件，您需要一个可与 ajax 配合使用的提交按钮，

嗯，是的，问题似乎是“event.preventDefault();”当我删除它时，它可以工作。但我不想提交表单，必须阻止它。