Я получаю эти ошибки в firebug при попытке выполнить загрузку ajax, но я не могу понять, почему. Я не смог найти ответ в предыдущих сообщениях.
1.TypeError: 'append' вызывает объект, который не реализует интерфейс FormData. list.appendChild(Li);
2.TypeError: list - null list.appendChild(li);
<?php
if(!empty($_FILES['images'])){
if($_FILES['images']['error'][$key]== 0 ){
move_uploaded_file($_FILES['images']['tmp_name'], "../profile/1.jpg");
$uploaded='1';
///create thumbnail/////
}
echo 'Image uploaded';
}
?>
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="../media/js/js.js"></script>
</head>
<body>
<form id="editUserProfile" method="post" action="" enctype="multipart/form-data">
<input type="file" id="images" name="images" multiple />
<button type="submit" id="btn" >Save</button>
</form>
<div id='response'>
<ul id='image-list'>
</ul>
</div>
<script type='text/javascript'>
(function (){
var input=document.getElementById('images'),
formdata=false;
function showUploadedItem(source){
var list=document.getElementById('image-list'),
li=document.createElement('li'),
img=document.createElement('img');
img.src=source;
li.appendChild(img);
list.appendChild(li);
}
if(window.FormData){
formdata=new FormData();
document.getElementById('btn').style.display="none";
}
input.addEventListener('change', function(evt){
document.getElementById('response').innerHTML='Uploading...';
var i=0,len=this.files.length,img,reader,file;
for(; i< len; i++){
file=this.files[i];
if(!!file.type.match(/image.*/)){
if(window.FileReader){
reader = new FileReader();
reader.onloadend=function(e){
showUploadedItem(e.target.result, file.fileName);
};
reader.readAsDataURL(file);
}
if(formdata){
formdata.append("images[]", file);
}
}
}
if(formdata){
$.ajax({
url:'a.php',
type:'POST',
data:formdata,
proccessData:false,
contentType:false,
success:function(res){
document.getelementById('response').innerHTML=res;
}
});
}
},false);
}());
</script>
</body>
</html>
Ошибка FormData
Первое, что я хотел бы предложить, это добавить
proccessData: false,
contentType: false
к вашему запросу ajax, но вы уже это делаете.
Без дополнительной информации или возможности увидеть пример работы, я предлагаю проверить эту статью и комментарии. Это может дать вам немного больше информации о вашей проблеме.
Проблема с Null Referrence
document.getElementById('response').innerHTML = res;
заменяет html внутри <div id='response'>
на res
. Так,
<div id='response'>
<ul id='image-list'>
</ul>
</div>
становится
<div id='response'>
<!-- Content of 'res' -->
</div>
(ПРИМЕЧАНИЕ: если вы используете +=
вместо этого, вы сохраните исходный html)
Теперь при условии, что res
не имеет элемента с id='image-list'
, когда вы пытаетесь получить свой список изображений в showUploadItem(...)
, он не будет существовать, поэтому list = null
list = document.getElementById('image-list') // list will be null
Поскольку вы хотите отобразить "Uploading..." пользователю, простое решение добавляет элемент на вашу страницу, например
<div id="LoadingText">
Uploading...
<div>
и просто переключать видимость этого, когда вы хотите отображать загрузку, одновременно скрывая содержимое <div id='response'>
если вы не хотите, чтобы это отображалось.
Когда загрузка завершена, скройте загружаемый текст и покажите свой ответ.
showUploadedItem()
когда вызываете его внутри своегоinput.addEventListener('change')
.showUploadedItem()
принимает только один, поэтому дляsource
устанавливается значениеe.target.result
аfile.filename
игнорируется.