PHP Ajax文件上传不工作[重复]

Question

我使用Bootstrap，在Modalbox中有一个窗体。

还有一个文件上传，我想上传图像，但如果我点击提交按钮，网站看起来像重新加载瞬间，没有文件上传...

这是我的Ajax脚本

<script type="text/javascript">
    $("#submitad").click(function () {
        $.ajax({
            url: "application/views/addad.php",
            type: "POST",
            data: $("#addad").serialize(),
            success: function (data)
            {
                alert(data);
            }
        });
    });
</script>

这是用于上传的html表单字段

这里是PHP的事情

<?php
$target_dir = "uploads/";
$filename = basename($_FILES["InputFile"]["name"]);
$target_file = $target_dir . $filename;
$imageFileType = pathinfo($target_file, PATHINFO_EXTENSION);
$check = getimagesize($_FILES["InputFile"]["tmp_name"]);
if ($check !== false) {
    echo "File is an image - " . $check["mime"] . ".";
} else {
    echo "File is not an image.";
}
?>

但它不起作用。。。

如果我将其从php文件中删除，它将使用type=“text”和数字保存我的其他字段

但是文件上传不起作用，我已经尝试了很多我在谷歌上找到的

Answer 1

要使用ajax上传文件，必须使用FormData（）而不是序列化。所以试着这样做：

var file_data = $('#InputFile').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);  // you can append as many values here as you want

$.ajax({
        url         : 'addad.php',
        dataType    : 'text',
        cache       : false,
        contentType : false,
        processData : false,
        data        : form_data,                         
        type        : 'post',
        success     : function(output){
            alert(output);
        }
});

工作实例

Answer 2

尝试下面的代码，并在ajax代码中做一些更改。在代码中添加以下参数。

processData:false，contentType:false，

并在ajax启动之前添加var formData=new FormData（$（"#formID"）[0]）；行。

或者检查下面的代码并根据您的代码进行更改。

<script type="text/javascript">
    $("#submitad").click(function () {
        var formData = new FormData($("#addad")[0]);
        $.ajax({
            url: "application/views/addad.php",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function (data)
            {
                alert(data);
            }
        });
    });
</script>