Question

我正在使用HTML，PHP和Javascript（我试图不使用jQuery或node.js）来开发小型的CMS / portfolio型自制产品，而我似乎无法制作FromData （）对象到达我的php脚本...

我想在提交表单（用于创建新项目页面）时，将其通过一小段js传递，然后将其发送到php脚本，该脚本将需要记录的内容写下来。数据库，创建文件等...

为了实现这一点，我试图使用FormData（）对象。我曾经用完整的url样式请求来做到这一点（它确实起作用了！），但我想添加上传图像的选项。

该表单被声明为enctype =“ multipart / form-data”，并且POST请求也被声明，但是随后似乎没有任何事情可以碰到php脚本...

这是代码（我是法国人，因此是一些变量名...）：

<form method="post" id="add_form" enctype="multipart/form-data">
            <fieldset>
                <legend>Infos:</legend><br />

                <label for="add_cat">Catégory:</label>

                <select name="add_cat" id="add_cat">
                    <?php
                        $USR_CATS = $bdd->query('SELECT * FROM cats');
                        while($cat = $USR_CATS->fetch()){ 
                        ?>
                        <option <?php echo 'value="'.$cat['cat'].'"'; ?> <?php if($cat['id'] == 1){echo 'selected';}?> ><?php echo $cat['cat'] ?></option>
                    <?php
                    }
                    $USR_CATS->closeCursor();
                    ?>
                </select><br />
                <input type="button" id="add_newCat" name="add_newCat" value="Ajouter une catégorie"><br />

                <label for="add_titre">Title:</label>
                <input type="text" id="add_titre" name="add_titre" required><br />

                <label for="add_support">Support:</label>
                <input type="text" id="add_support" name="add_support" required><br />

                <label for="add_com">Commentaire du projet:</label>
                <textarea id="add_com" name="add_com" required></textarea><br />
            </fieldset>

            <fieldset id="add_infosFieldset">
                <legend>Infos Techniques:</legend><br />

                <input type="text" class="add_infos" placeholder="ex: Format: 65x84 cm" style="display:block">

                <input type="button" id="add_newInfos" name="add_newInfos" value="Ajouter une information"><br />
            </fieldset>

            <fieldset id="add_imagesFieldset">
            <legend>Images:</legend>
<input type="file" class="add_images" style="display:block">
                    <input type="button" id="add_newImagesBouton" name="add_newImagesBouton" value="Ajouter une image"><br />
            </fieldset>

            <input type="submit">
        </form>

提交后，此表单的结果将通过js：

var add_form = document.getElementById("add_form");
add_form.addEventListener("submit", function(e){
    e.preventDefault();
    add_formData = new FormData();

    //Basic infos
    add_formData.append("add_prjt", true);
    add_formData.append("add_cat", document.getElementById("add_cat").value);
    add_formData.append("add_titre", document.getElementById("add_titre").value);
    add_formData.append("add_support", document.getElementById("add_support").value);
    add_formData.append("add_com", document.getElementById("add_com").value);

    //I had, for that, to make a loop because I want the user to be able to create and fill as many fields as he/she wants
    var infos = document.getElementsByClassName("add_infos"); 
    var infosCh = ""; //So I'm creating a string which will contain them all

    for(var i = 0; i < infos.length; i ++){ 
        infosCh += infos[i].value + "<br />"; //Concatening everything so that the different infos are separated by <br />
    }
    add_formData.append("add_infos", infosCh);

//And then a bunch of shenaningans regarding the number of images people want to upload, so that there can be as much upload buttons as they want, each of them containing several images
    if(add_nbreBoutonsImages > 0){ 
        add_formData.append("add_nbreBoutonsImages", add_nbreBoutonsImages);

        var add_nbreImages = 0; 

        for(var j = 1; j < add_nbreBoutonsImages; j++){
            var nbreImagesUpload = document.getElementById("add_newImages"+j).files.length; //On regarde combien d'images y a été sélectionné
                for(var x = 0; x < nbreImagesUpload; x++){ //Et pour chacune d'entres elles
                    add_nbreImages++;
                    add_formData.append("add_image"+add_nbreImages, document.getElementById("add_newImages"+j).files[x], "add_image"+add_nbreImages);
                }
            }
        }

    //add_formData.contentType = false;
    //add_formData.processData =false;
    //I tried with and without those, but they doesn't seem to work without jQuery


//The problem must come from here...
    var req = new XMLHttpRequest();

    req.open("POST", "add.php", true);
    req.setRequestHeader("Content-Type", "multipart/form-data");
    req.send(add_formData);

});

我在请求/发送步骤上有一个更高级的版本，但我尝试首先使其尽可能简单，以使其正常工作

然后是PHP

if(isset($_POST['add_titre'])){
        $fichierFichier = fopen('fichier.txt', 'a+');
        fputs($fichierFichier, 'ça a marché...');
    }

现在我只是想看看PHP是否可以得到任何东西...但是即使那些简单的指令也无法执行...好像PHP没有得到变量一样？

我不明白...令人沮丧的是，似乎什么都没有用，没有错误信息，没有任何东西...只是大的白色空白

无论如何，谢谢您的时间！

Answer 1

有关情况的快速更新：问题一出，当我尝试使用带有“ multipart / data-form”封装的ajax将某些内容发送到PHP时。

我意识到，即使我修改了ajaxPost脚本（我用来通过POST通过ajax通过原始名称通过POST发送内容）时，甚至来自同一项目的另一个脚本也停止工作了，

function ajaxPost(url, data, callback, isData){
    var req = new XMLHttpRequest();

    req.open("POST", url); 

    req.addEventListener("load", function(){
        if(req.status >= 200 || req.status < 400){
            callback(req.responseText);
        }
        else{
            console.error(req.status + " " + req.statusText + " " + url);
        }
    });

    req.addEventListener("error",function(){ 
        console.error("Erreur réseau avec l'url: " + url);
    });

    //Ajout pour contrôler ou non si on envoie au format JSON
    if(isData){
        req.setRequestHeader("Content-Type", "multipart/form-data");
    }
    else{
        req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
    }
    req.send(data); 
}

只要我调用它并指定我想要“ application / x-www-form-urlencoded”，就可以了。但是当我尝试其他选项时，它要么发送formData要么发送一个简单的字符串，否则将停止工作。

我已经检查了我的php.ini配置文件，并且file_upload已打开。而且当表单本身是一个enctype = multipart / form-data时，我绕过了javascript步骤，就可以了...

棘手的是，我一次需要所有信息，以便可以正确放置每个文件，以创建页面的项目命名的文件夹中的图像，等等...

所以，基本上还是在同一地点，但是有了更清晰的了解... 无论如何，我的php可能被配置为阻止这种跨语言的事情？也许我对FormData的理解不正确，并且设置不正确？

看来我无法将FormData对象传递到我的PHP脚本中

1 个答案: