我正在尝试创建一个图片上传系统,您只需按图标>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']
url
。 sucess:function(){}
在 PHP 页面(url
设置为(后触发,通常会将 PHP 关联数组编码为 JSON,例如:echo json_encode($assoc_array)
。