AJAX - 仅使用图标(Facebook样式)上传图片


AJAX - Picture upload with only an icon (Facebook style)

我正在尝试创建一个图片上传系统,您只需按图标>Windows 资源管理器打开> 选择图片> 选择后,上传过程开始立即自动。但是,每次我尝试通过 AJAX 运行该代码时,我都会得到undefined index notice可以使用"开发人员工具"选项卡查看。我的 PHP 没有任何问题,所以我不在这里发布它,因为上传过程在没有 AJAX 的情况下运行良好。

我认为我的 AJAX 代码可能有问题。任何帮助将不胜感激!:)

这是我的标记 [HTML]

<div class="event-head" id="hover-card">
        <i class="fa fa-camera" id="upload-event-cover" title="Update your cover"></i>
        <?php $attributes = ['id' => 'update-cover'];?>
        <?php echo form_open_multipart('events/upload_cover_photo', $attributes);?>
            <input type='hidden' name='event_id' value='<?=$event['event_id']?>'/>
            <input type="file" id="event-cover-file" name="userfile" />
        <?php echo form_close();?>
</div>

这是 AJAX 部分 [JS]

<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);
});

url: from.attr('action')意味着您将 JavaScript 数据提交到构建 HTML 的同一 PHP 页面。您需要在页面上的PHP中具有适当的条件才能正常工作。我建议您使用完全不同的url将 AJAX 提交到。您通常将 AJAX 发送到处理 JSON 数据(强制使用 dataType:'JSON'(作为$_GET['json_object_property']$_POST['json_object_property'] urlsucess:function(){}在 PHP 页面(url设置为(后触发,通常会将 PHP 关联数组编码为 JSON,例如:echo json_encode($assoc_array)