个人中心
gpt4 book ai didi

php - 将表单输入附加到 Formdata 对象不起作用

转载 作者：行者123 更新时间：2023-12-01 03:09:05 24 4
gpt4 key购买 nike

我有一个用于发送邮件的表单。它包含诸如to_name、主题、消息和附件按钮等字段。我将在单击时创建一个文件输入字段具有类 .file_add_btn 的按钮。

//click event for add files
$(".file_add_btn").click(function(){
    if($("#file_div").html() == '')
    {
       $("#file_div").append('<div class="file_btn_div" id="file_btn_div_first"><input type="file" class="btn_browse" name="file_uploads[]">'+
       '<input type="button" class="del_file" value="X"></div>'); 
    }
    else
    {
        if($(document).find('.btn_browse:last').get(0).files.length !==0)
        {
            $("#file_div").append('<div class="file_btn_div"><input type="file" class="btn_browse" name="file_uploads[]">'+
            '<input type="button" class="del_file" value="X"></div>');
        }
    }

});

我编写了以下函数以将文件输入包含到 formData 中。

$.fn.serializefiles = function() {
    var obj = $(this);

    var form_data = new FormData(this[0]);
    $.each($(obj).find('.btn_browse'), function(i, tag) {
        $.each(tag.files, function(i, file) {
             console.log(tag.name+' '+file.name)//this is printing in console
                form_data.append(tag.name, file);
        });
    });
    var params = $(obj).serializeArray();
    $.each(params, function (i, val) {
            console.log(val.name+'<br/>');
            console.log(val.value+'<br/>');
            **//here file names are not coming.All other elements are coming.They are not adding to form_data object**
            form_data.append(val.name, val.value);
    });
    return form_data;
};

我的ajax调用如下:

$.ajax({
    type: "POST", 
    url: 'process.php',
    data: $("#compose_message").serializefiles() ,//formID=#compose_message
    asyn: true,
    cache: false,
    processData: false,
    contentType: false,
    success:function()
          ....

我无法将输入附加到 form_data 对象中。在控制台中，我在单击按钮时在 POST 中看到 [object FormData]。

最佳答案

编辑:我上面的最初评论是正确的。您不需要做任何花哨的事情，除了将表单对象传递到 FormData 构造函数中，如下面的示例所示。

console.log(JSON.stringify(formData)); 永远不会显示 FormData 的值。但是，如果您查看浏览器的网络选项卡，发送的请求将显示正在传递的值。

如果你想在数据传递之前检查数据，你可以使用这个 answer .

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style>
        input {
            float: left;
            clear: left;
        }
    </style>
</head>
<body>
    <form method="post" enctype="multipart/form-data">
        <input type="text" name="text" value="text">
        <input type="hidden" name="hidden" value="hidden">
        <input type="file" name="file_uploads[]" value="">
        <input type="file" name="file_uploads[]" value="">
        <input type="file" name="file_uploads[]" value="">
        <input type="button" value="Add">
        <input type="submit" value="Submit">
    </form>
    <script>
    $(function () {
        $('form').on('submit', function (e) {
            e.preventDefault();
            var formData = new FormData(this);
            console.log(JSON.stringify(formData)); // will always be {}

            $.ajax({ url: '404', type: 'post', data: formData, processData: false, contentType: false });
        });

        $('[type=button]').on('click', function () {
            $(this).before('<input type="file" name="file_uploads[]" value="">');
        });
    });
    </script>
</body>
</html>

关于php - 将表单输入附加到 Formdata 对象不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37566532/

24 4 0
文章推荐： python - 为什么无法使用 bool 掩码修改数据框中的值？
文章推荐： jquery - 截断数据表中的单元格，还可以在工具提示中预览全文
文章推荐： jquery - Owl Carousel 2 淡入淡出效果不起作用
文章推荐： jQuery - 按符号分割字符串并获取最后一部分
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com