I'm getting these errors in firebug when trying to do an ajax upload, but I can't figure out why. I was unable to find an answer in any previous posts.
1.TypeError: 'append' called on an object that does not implement interface FormData. list.appendChild(li);
2.TypeError: list is 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>
I'm getting these errors in firebug when trying to do an ajax upload, but I can't figure out why. I was unable to find an answer in any previous posts.
1.TypeError: 'append' called on an object that does not implement interface FormData. list.appendChild(li);
2.TypeError: list is 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>
-
You are passing two parameters to
showUploadedItem()when you call it inside yourinput.addEventListener('change')code block.showUploadedItem()only accepts one, sosourceis being set toe.target.resultandfile.filenameis being ignored. – Josh Durham Commented Feb 23, 2014 at 1:15 - thank you, i'll try changing it, and will let you know.. – Alex Commented Feb 23, 2014 at 1:49
1 Answer
Reset to default 2FormData Issue
The first thing I would suggest is adding
proccessData: false,
contentType: false
to your ajax request, but you're already doing that.
Without more detail or being able to see a running example, I suggest checking out this article and the ments. It may provide a little more insight into your issue.
Null Referrence Issue
document.getElementById('response').innerHTML = res; is replacing the html inside of <div id='response'> with that of res. So,
<div id='response'>
<ul id='image-list'>
</ul>
</div>
bees
<div id='response'>
<!-- Content of 'res' -->
</div>
(NOTE: if you use += instead, you'll retain the original html)
Now assuming res does not have an element with id='image-list', when you try to get your image list in showUploadItem(...), it will not exist, so list = null
list = document.getElementById('image-list') // list will be null
Since you would like to display "Uploading..." to the user, an easy solution is adding an element to your page like
<div id="LoadingText">
Uploading...
<div>
and just toggle the visibility of it when you want to display uploading while simultaneously hiding the content of <div id='response'> if you don't want that to be displayed.
When uploading has finished, hide the uploading text and show your response.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745239980a4618123.html
评论列表（0条）