Javascript Ajax—通过Ajax将输入文件和附加变量发送到php文件_Javascript_Php_Ajax_Post

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

javascript php ajax post

Javascript Ajax—通过Ajax将输入文件和附加变量发送到php文件,javascript,php,ajax,post,Javascript,Php,Ajax,Post,我正试图通过ajax发送输入文件和输入文本。因为我将把这个特性添加到我现有的函数中，这个函数还有很多其他变量，所以我不能像这里使用的那样简单地发送整个表单这是它的基本要旨我的HTML <input type='text' name='text' id='text'> <input type='file' name='media' type="file" / id='media'> <input type="button" value="Upload" name

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

PHP
因此，如我的代码所示，我需要一种方法将var媒体
、var文本
和var变量
从data:{}、
发送到upload.php
，您可以通过使用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>


jqueryajax文件上传
$（文档）.ready（函数（）{
$（“#媒体”）。更改（功能（e）{
var file=this.files[0]；
var form=new FormData（）；
表单.append（'媒体'，文件）；
form.append（'text'，$（'#text'）.val（）；
$.ajax({
url:“upload.php”，
类型：“POST”，
cache:false，
contentType:false，
processData:false，
数据：表格，
成功：功能（响应）{
$（'.result'）.html（response.html）
}
});
});
});
根据您的文件更改ID，下面是通过jquery/ajax发送输入类型文件和文本数据的示例。重要的是var data=newformdata（$（“#myForm”）[0]）此代码将向目标文件发送数据，如下例所示为sendDetails.php。您可以根据需要更改目标文件名。希望它能帮助你：）
$（文档）.ready（函数（）{
$（“#提交”）。单击（函数（）{
风险值形式=$（“#我的形式”）；
var数据=新的FormData（$（“#myForm”）[0]）；
$.ajax({
url:form.attr（“操作”），
类型：“POST”，
数据：数据，
processData:false，
contentType:false，
成功：功能（d）{
警戒（d）；
}
});
});
$（“#myForm”）.submit（函数（）{return false；}）；
$（“#显示”）。单击（函数（）{
$（“#showDetails”）.load（“showDetails.php”）；
});
})

名称：

CNIC:

Gmail:

图像：

拯救
显示详细信息
谢谢，这可以用两个以上的变量来完成，对吗？编辑：nvm刚刚试过。谢谢你，小伙子，我能帮上忙。干杯：）如何将其修改为“多”阿曲布他输入？
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);

}

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