Javascript AJAX-仅使用图标上传图片（Facebook风格）

我正在尝试创建一个图片上传系统，您只需按下图标> Windows资源管理器打开>选择图片>选择后，上载过程开始 立即自动地。然而，每次我试图通过AJAX运行该代码时，都会收到未定义索引的通知，可以通过“开发人员工具”选项卡查看该通知。我的PHP没有任何问题，所以我不会在这里发布它，因为没有AJAX，上传过程可以正常工作

我认为我的AJAX代码可能有问题。任何帮助都将不胜感激！：

这是我的标记[HTML]

这里是AJAX部分[JS]

从改变开始：

$("#hover-card").on({
    mouseenter: function() {
        $("#upload-event-cover").animate({
        opacity: 1
        }, {
            duration: 100,
        });
    },
    mouseleave: function() {
        $("#upload-event-cover").animate({
            opacity: 0
        }, {
            duration: 100,
    });
  }
});

到

---

url:from.attr'action'表示您正在向构建HTML的同一PHP页面提交JavaScript数据。您需要在页面上的PHP中使用适当的条件才能使其工作。我建议您使用完全不同的url将AJAX提交到。您通常将AJAX发送到处理JSON数据的url，该url的数据类型为：'JSON'作为$\u GET['JSON\u object\u property']或$\u POST['JSON\u object\u property']。suces:PHP页面url设置为通常将PHP关联数组编码为JSON-like:echo-JSON\u-encode$assoc\u-Array后，函数{}启动。

您使用的是什么版本的PHP？删除，持续时间后：100。我使用的是PHP 5.5版，我已经使用CodeIgniter frameworkfrom.find.comment\u submit构建了我的应用程序？我看不到HTML。检查这个。你知道在第一次发生更改之前不会设置提交事件，对吗？是的，是这样的。问题是AJAX无法获取我想要上传的文件名。如果没有AJAX，它可以正常工作，因此我的代码会出现一些奇怪的情况。我检查了我的“开发人员工具”选项卡，用户文件的路径如下：userfile:C:\fakepath\IMG_0418.JPG.863x516_q85_box-022551843324_crop_detail.jpgIs当前文件夹中生成HTML的PHP页面中的事件文件夹在哪里？

<script type="text/javascript"> 
// Animate the camera icon everytime user hover's over #hover-card
$("#hover-card").on({
    mouseenter: function() {
        $("#upload-event-cover").animate({
            opacity: 1
        }, {
            duration: 100,
        });
    },
    mouseleave: function() {
        $("#upload-event-cover").animate({
            opacity: 0
        }, {
            duration: 100,
        });
    }
});

// Open "Browse" 
$('#upload-event-cover').click(function(e) {
       e.preventDefault();
       $('#event-cover-file').click();
});


  $("#event-cover-file").change(function(e) {

    if($(this).val() != "") {

       // Send it via AJAX
        $("form#update-cover").submit(function(e) {
                var from = $(this);

                $.ajax({
                    url: from.attr('action'),
                    type: from.attr('method'),
                    data: { userfile: $('#event-cover-file').val() },
                    beforeSend: function() {
                        from.find(".comment_submit").hide();
                        from.find("#spinner_comment").show();
                    },
                    success: function(data) {
                        if(data.st == 1) {
                            $("#event-cover-file").html(data);
                        }

                    }, complete: function() {
                        from.find("#spinner_comment").hide();
                        from.find(".comment_submit").show();
                    }
                });
                e.preventDefault();
            });
        }
    });    
</script>

$("#hover-card").on({
    mouseenter: function() {
        $("#upload-event-cover").animate({
        opacity: 1
        }, {
            duration: 100,
        });
    },
    mouseleave: function() {
        $("#upload-event-cover").animate({
            opacity: 0
        }, {
            duration: 100,
    });
  }
});

var uec = $('#upload-event-cover')
$('#hover-card').mouseenter(function(){
  uec.fadeIn(100);
}).mouseleave(function(){
  uec.fadeOut(100);
});