Ajax - 通过 ajax 将输入文件和附加变量发送到 php 文件答案

【问题标题】：Ajax - Sending input file and additional variable to php file through ajaxAjax - 通过 ajax 将输入文件和附加变量发送到 php 文件
【发布时间】：2017-06-16 09:24:23
【问题描述】：

我正在尝试通过 ajax 发送 input file 和 input text。因为我将把这个功能添加到我现有的有很多其他变量的函数中，所以我不能像这里使用的那样简单地使用发送整个Form

Uploading both data and files in one form using Ajax?

这是它的基本要点

我的 HTML

<input type='text' name='text' id='text'>
<input type='file' name='media' type="file" / id='media'>
<input type="button" value="Upload" name='submit'/>

我的阿贾克斯

$(":button").click(function(){
        var myFormData = new FormData();
        var media = document.getElementById('media');
        var variable = 'foo';
        myFormData.append('pictureFile', media.files[0]);
        var text = $("#text").val();
        $.ajax({ 
            type: 'POST',
            url: 'upload.php',
            data: 
            {
                pictureFile: myFormData,
                text: text,
                var: variable,
            },  
            cache: false,
            success: function (data) {
                alert(data);
            },
            processData: false,
            contentType: false, 
        });
});

PHP

include_once ("connection.php");
if ($_SERVER['REQUEST_METHOD'] == 'POST'){

    $temp_name = $_FILES['pictureFile']['name'];
    $pic_type = $_FILES['pictureFile']['type'];

    $pic_temp = $_FILES['pictureFile']['tmp_name'];
    $pic_path = "images/";
    move_uploaded_file($pic_temp,'images/'.$temp_name);

}

因此，如我的代码所示，我需要一种方法将这些 var media、var text 和 var variable 从 data:{}, 发送到 upload.php

【问题讨论】：

标签： javascript php ajax post

【解决方案1】：

您可以通过使用 append

来实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery Ajax File Upload</title>
</head>
<body>
    <input type='text' name='text' id='text'>
    <input type="file" name="media" id="media">
    <div class="result"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $('#media').change(function(e){
            var file = this.files[0];
            var form = new FormData();
            form.append('media', file);
            form.append('text', $('#text').val());
            $.ajax({
                url : "upload.php",
                type: "POST",
                cache: false,
                contentType: false,
                processData: false,
                data : form,
                success: function(response){
                    $('.result').html(response.html)
                }
            });
        });
    });
    </script>
</body>
</html>

【讨论】：

谢谢，这可以用两个以上的变量来完成，对吧？编辑： nvm 刚刚尝试过。再次感谢
很高兴我能帮上忙。干杯:)
如何修改“多个”属性的输入？

【解决方案2】：

根据您的文件更改ID，下面是通过jquery/ajax发送输入类型文件和文本数据的示例。重要的是var data=new FormData($("#myForm")[0]); 此代码会将数据发送到您的目标文件，如下例所示为sendDetails.php。您可以根据需要更改目标文件名。希望对你有帮助:)

$(document).ready(function(){
    
    $("#submit").click(function(){

        var form=$("#myForm");
        var data=new FormData($("#myForm")[0]);
       
        $.ajax({
            url:form.attr("action"),
            type:"POST",
            data:data,
            processData: false,
            contentType: false,
            success:function(d){
                alert(d);
            }

        });

    });

    $("#myForm").submit(function(){ return false;});

    $("#show").click(function(){
        
        $("#showDetails").load("showDetails.php");
    });



})

<body>

<div>
<form id="myForm" method='post' action='sendDetails.php' enctype='multipart/form-data'>
Name: <input type="text" placeholder="Please Enter Your Name:" name="studentName" id="name"><br>
CNIC: <input type="text" placeholder="Please Enter Your CNIC:" name="studentCNIC" id="CNIC"><br>
Gmail:<input type="text" placeholder="Please Enter Your Gmail:" name="studentGmail" id="Gmail"><br>
Image:<input type="file" name="studentimage" id="image"><br>
<Button id="submit" name="submit">Save</Button>
</form>
</div>


<div id="showDetails">

</div>
<div>
<Button id="show">Show_Details</Button>
</div>

</body>

url:form.attr("action"), 类型：“POST”，数据：数据，处理数据：假，内容类型：假，成功：函数（d）{ 警报（d）； }

    });

});

$("#myForm").submit(function(){ return false;});

$("#show").click(function(){

    $("#showDetails").load("showDetails.php");
});

})

【讨论】：