Question

我正在尝试创建一个图片上传系统，您只需按下图标＆gt; Windows资源管理器打开＆gt;选择图片＆gt;选择后，上传过程开始立即自动。但是，每次我尝试通过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>

Answer 1

首先改变：

$("#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发送给url，该dataType:'JSON'处理JSON数据（强制$_GET['json_object_property']）为$_POST['json_object_property']或sucess:function(){}。在您的PHP页面（url设置为）之后触发echo json_encode($assoc_array)通常将PHP关联数组编码为JSON，如：{{1}}。

AJAX - 仅带图标的图片上传（Facebook风格）

1 个答案: