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

Question

我已经尝试研究几乎所有内容，但我没有找到修复代码的最终解决方案。正如您在调试图像中看到的那样，可以读取文件道具。在 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>

Answer 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();
});

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

希望能帮助到你！！

Answer 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>