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

我正尝试创建图片上传系统，您只需按图标> Windows资源管理器打开>选择图片>选择后，上传过程开始立即自动地。但是，每次我尝试通过AJAX运行代码时，我都会收到undefined index notice，可以使用“开发人员工具”选项卡查看该代码。我的PHP没什么问题，所以我不会在这里发布它，因为上传过程在没有AJAX的情况下工作得很好。AJAX - 仅使用图标上传图片（Facebook风格）

我在想我的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>

来源

2014-09-26 Cooper

您使用的是哪个版本的PHP？ '持续时间：100'后删除'，'。 – PHPglue 2014-09-26 00:22:24

我正在使用PHP 5.5版本，并使用CodeIgniter框架 – Cooper 2014-09-26 00:23:28

'from.find（“。comment_submit”）'构建了我的应用程序。我没有看到HTML。 – PHPglue 2014-09-26 00:43:44

开始改变：

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

来源

2014-09-26 00:55:33 PHPglue

是的，做到了。问题是AJAX无法获取我想要上传的文件的名称。如果没有AJAX，它就可以工作，所以我的代码有些奇怪的事情发生。 – Cooper 2014-09-26 01:01:40

我检查了我的开发工具选项卡，用户文件的路径如下：userfile：C：\ fakepath \ IMG_0418.JPG.863x516_q85_box-0,225,5184,3324_crop_detail.jpg – Cooper 2014-09-26 01:03:03

当前文件夹中的'events'文件夹是您的PHP页面，生成HTML，在？ – PHPglue 2014-09-26 01:10:52

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

回答

相关问题