Question

我正在尝试通过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'/>

我的Ajax

$(":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

Answer 1

您可以使用追加

来实现这一目标

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

Answer 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”，数据：数据， processData：否， contentType：false，成功：功能（d）{ 警报（d）; }

    });

});

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

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

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

}）

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

2 个答案: