时间戳

首页 > 解决方案 > 使用 ajax for PHP 上传文件：TypeError

jquery - 使用 ajax for PHP 上传文件：TypeError

问题描述

我实际上是在尝试使用 jQuery ajax 方法上传图像文件。但我仍然有两个错误。表格很大，有多个输入文件。目标是在用户输入其他字段时上传文件。因此，提交按钮用于操作，该操作基于图像选择。当一个输入文件更改时，AJAX 代码必须工作。

我试图在 stackoverflow 上找到一个解决方案，因为 1h 改变了几种不同的语法，但没有任何效果。

我的代码在这里

<form id="form_animation" method='post' enctype='multipart/form-data' accept-charset='UTF-8' action=''>
    <!-- something like 2 fieldsets and 15 input before my input file -->
    <input type="file" name="animation_01_file" id="animation_01_file" data-line="1" accept="image/*">
   <!-- few others input -->
</form>

jQuery端

$("input[type='file']").on('change', function(){

    var form = $(this).get(0);
    var fd = new FormData(form);

    /*var file = $(this).prop('files')[0];
    var fd = new FormData();
    console.log(file);
    fd.append('file', file);*/

    /* var fd = new FormData( $('#form_animation')[0] );
    ===> return error type 'append'
    */


    $.post(
    "traitements_ajax.php", {
        data: fd,
        processData: false,
        contentType: false,
                cache: false
    },
        function myResult(text_result){
            //some results here
        },
        "text"
    );

您可以在评论中看到另一个尝试。

错误总是：

TypeError：在未实现接口 FormData 的对象上调用了“附加”。

或者

TypeError：FormData.constructor 的参数 1 没有实现接口 HTMLFormElement。

真的很感谢你的时间。

标签： jqueryajaxfile-upload

解决方案

您需要在<form>此处使用您的 id：

var form = $(this).get(0);

在这里，this意味着您正在尝试获取type="file"错误的数据。

您需要在此处使用您的表单 ID，如下所示：

var form = $("#yourFormID").get(0);

您的表单示例：

<form id="yourFormID" enctype="multipart/form-data">......

或者，只是简单的使用：

var fd = new FormData($("#yourFormID")[0]);

一些有用的链接：

$(this) 在 jquery 中是什么意思

推荐阅读