Question

我正在尝试使用AJAX上传图片。当我这样尝试时，没有任何反应。 AJAX不会调用H_FileUpload.php。但是$("#in_profile_img")部分确实有效。只有AJAX调用不起作用。为什么不起作用？

HTML：

<ul class="dropdown-menu fm-menu" role="menu">
    <li>
        <a href="javascript:void(0)" onclick="$.change_profile_img()">
            <i class="fa fa-pencil"></i> Change
        </a>
    </li>
    <li><a href="#"><i class="fa fa-trash-o"></i> Delete</a></li>
</ul>
<form id="form_profile_image" enctype="multipart/form-data" action="" method="POST">
    <input type="file" name="profile_img" id="in_profile_img" style="display:none;" />
</form><!-- profile image form -->

JavaScript的：

$.change_profile_img = function() {
    $("#in_profile_img").click();
}

$("#in_profile_img").on('change', (function(e) {
    e.preventDefault;
    var formData = new FormData(this);

    $.ajax({
        url : "./handlers/H_FileUpload.php",
        type : "POST", 
        data : formData,
        cache : false,
        contentType : false,
        processType : false,
        success : function(data) {
            alert("Success");
            alert(data);
        }
    });
}));

PHP（H_FileUpload.php）：

<?php
$name = $_FILES["profile_img"]["name"];
$result["ok"] = $name;

echo json_encode($result);

?>

Answer 1

更改此行

var formData = new FormData(this);

到

var formData = new FormData($('#form_profile_image')[0]);

Answer 2

你可以这样做：

var formData = new FormData($(this)); //$(this) is an object

或者您可以添加更多参数：

var formData = new FormData();
formData.append('image', $('input[type=file]')[0].files[0]);

请参阅：How to use FormData for ajax file upload

Answer 3

您有几个错误，

使用FormData对象时选择表单。
指定enctype。
使用processData而不是processType。

试试这个

    $("#in_profile_img").on('change', function(e){

        e.preventDefault;

        var formData = new FormData(document.getElementById("form_profile_image"));

        $.ajax({
            url : "./handlers/H_FileUpload.php",
            type : "POST", 
            data : formData,
            cache : false,
            enctype: 'multipart/form-data',
            contentType : false,
            processData : false,
            success : function(data) {
                alert("Success");
                alert(data);
            }
        });

    });

希望这会有所帮助

Answer 4

试试这个

在你的ajax中试试这个

var data = new FormData($('#posting_comment')[0]);
    $.ajax({
                   type:"POST",
                   url:"handlers/H_FileUpload.php",
                   data:data,
                   mimeType: "multipart/form-data",
                    contentType: false,
                    cache: false,
                    processData: false,
                   success:function(data)
                  {
                        //alert(data);
                          $(".image").html(data);
                   }
           });

在你的php文件中

$attachment_file=$_FILES["profile_img"];
$output_dir = "upload/";
$fileName = $_FILES["profile_img"]["name"];
move_uploaded_file($_FILES["profile_img"]["tmp_name"],$output_dir.$fileName);
//echo "File uploaded successfully";

有关详细信息，请阅读本教程http://w3code.in/2015/10/how-to-upload-file-using-php-and-ajax-beginner-guide/

Answer 5

您可以使用jquery来显着简化任务。导入jquery：https://code.jquery.com/jquery-3.2.1.min.js

var formData = $("#in_profile_img");
$.post('./handlers/H_FileUpload.php',{data:formData},function(e){
    alert("success");
    alert(e);
});

如何使用AJAX上传图像？

5 个答案: