我遇到这个问题有一段时间了,我只是不知道自己做错了什么。(我认为这与ajax响应有关)
我正在尝试将图像上传到服务器。我在uploadive插件上碰碰运气,现在我正在尝试这个插件-->https://github.com/blueimp/jQuery-File-Upload
我的网站包含下拉列表(包含对象),所选选项用折叠字段(对象任务)填充div:任务名称、描述和输入字段。这是我用来填充div的ajax脚本:
<script type="text/javascript">
function showUzdevumi(str) {
if (str == "") {
document.getElementById("nacDargums_uzdevumi").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("nacDargums_uzdevumi").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","getUzdevumi.php?q="+str,true);
xmlhttp.send();
}
}
</script>
这是getUzdevumi.php文件的一部分,在这里我可以获得关于每个任务的信息和每个任务的输入字段:
while($row = mysqli_fetch_assoc($result))
{
?> <!--//${"id_uzdevums_".$i} = $row["id_uzdevums"]; !-->
<div class='nacDargums_popup_uzd' id='<?php echo "nacDargums_popup_uzd_".$i."" ?>'>
<p class='nacDargums_popup_uzd_title'><?php echo "".$i.". ".$row['uzd_nosaukums']." : "?></p>
<div class='nacDargums_popup_uzd_desc'><?php "".$row['uzd_apraksts'].""?></div></div>
<div id='<?php echo "uzd_id_hidden_".$i.""?>' style='display: none;'><?php"".$row['id_uzdevums'].""?></div>
<!-- Upload input field !-->
<input class="fileupload" id=<?php echo "fileupload".$i ?> type="file" name="files[]" data-url="jQuery-File-Upload-master/server/php/" multiple>
<?php $i++; ?>
<?php
}
这就是我使用jquery插件的地方:
<script>
$(function () {
$('.fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
} );
});
</script>
问题:当我在这些输入字段中选择文件时,绝对不会发生任何事情。如果我在页面的其他任何地方创建完全相同的输入字段,它们都可以完美地工作并上传问题从AJAX返回的输入字段开始。
我已经想了很长时间了,找不到任何对我有用的东西,现在我很沮丧,所以我希望任何人都能告诉我我做错了什么。
您不能将插件分配给初始化插件时不存在的html。如果你替换了html,你还需要再次初始化插件。
一个快速的方法是将插件初始化封装到一个函数中,这样你就可以在页面加载时以及更新html 时调用该函数
function initializeUploader() {
$('.fileupload').fileupload({
dataType: 'json',
done: function(e, data) {
$.each(data.result.files, function(index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
}
// page load initialization
$(function() {
initializeUploader();
});
// ajax initialization
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("nacDargums_uzdevumi").innerHTML = xmlhttp.responseText;
initializeUploader();
}
};