2014-09-05 122 views
-1

我一直在关注YouTube上的一个视频教程,上传一个AJAX,我知道相当数量的javascript,jquery等,但这让我难住了。未捕获的SyntaxError:意外的令牌<

我的代码在下面,任何人都可以启发我为什么这种情况发生时,当我尝试上传超过一个文件或在某些情况下1个文件。

我已经在下面包含了我的代码,它并不完美,因为我说我跟随一个视频教程。

<?php 

if (!empty($_FILES['file'])) 
{ 
foreach($_FILES['file']['name'] as $key=>$name) 
{ 
    if ($_FILES['file']['error'][$key] == 0 && move_uploaded_file($_FILES['file']['tmp_name']  [$key], "uploads/{$name}")) 
    { 
     $uploaded[] = $name; 
    } 
} 

if (!empty($_POST['ajax'])) 
{ 
    die(json_encode($uploaded)); 
} 
} 

?> 

<html> 
<head> 
<title></title> 
<script type="text/javascript" src="upload.js"></script> 
</head> 
<style type="text/css"> 
#upload_progress {display: none;} 
</style> 
<body> 

<div id="uploaded"> 
     <?php 
      if(!empty($uploaded)) 
      { 
       foreach ($uploaded as $name) { 
        echo '<div><a href="uploads/'.$name.'">'.$name.'</a></div>'; 
       } 
      } 
     ?> 
</div> 

<div id="upload_progress"></div> 

<form method="post" action="" enctype="multipart/form-data"> 
    <input type="file" id="file" name="file[]" multiple="multiple"> 
    <input type="submit" id="submit" value="upload"> 
</form> 

</body> 
</html> 

而我的JS文件是

var handleUpload = function(event) { 
event.preventDefault(); 
event.stopPropagation(); 

var fileInput = document.getElementById('file'); 

var data = new FormData(); 

data.append('ajax', true); 

for (var i = 0; i < fileInput.files.length; ++i) 
{ 
    data.append('file[]', fileInput.files[i]); 
} 

var request = new XMLHttpRequest(); 

request.upload.addEventListener('progress', function(event) { 
    if (event.lengthComputable) 
    { 
     var percent = event.loaded/event.total; 
     var progress = document.getElementById('upload_progress'); 
     while (progress.hasChildNodes()) 
     { 
      progress.removeChild(progress.firstChild); 
     } 
     progress.appendChild(document.createTextNode(Math.round(percent * 100) + '%')); 
    } 



}); 

request.upload.addEventListener('load', function(event) { 
    document.getElementById('upload_progress').style.display = 'none'; 
}); 

request.upload.addEventListener('error', function(event) { 
    alert("Upload Failed"); 
}); 

request.addEventListener('readystatechange', function(event) { 
    if (this.readyState == 4) { 
     if (this.status == 200) 
     { 
      var links = document.getElementById('uploaded'); 
      console.log(this.response); 
      var uploaded = JSON.parse(this.response); 
      var div, a; 

      for (var i = 0; i < uploaded.length; i++) 
      { 
       div = document.createElement('div'); 
       a = document.createElement('a'); 
       a.setAttribute('href', 'uploads/' + uploaded[i]); 
       a.appendChild(document.createTextNode(uploaded[i])); 
       div.appendChild(a); 
       links.appendChild(div); 
      } 
     } else { 
      console.log("error" + this.response); 
     } 
    } 
}); 

request.open('POST', 'index.php'); 
request.setRequestHeader('Cache-Control', 'no-cache'); 

document.getElementById('upload_progress').style.display = 'block'; 

request.send(data); 


} 

window.addEventListener('load', function(event) { 
var submit = document.getElementById('submit'); 
submit.addEventListener('click', handleUpload); 

}); 

最初的视频我使用eval用于上传变量本来,我改变了这JSON.parse,我不希望速战速决,而是一个回答为什么这不起作用?

感谢 本

+0

看看你的浏览器的开发者工具。你能在Net标签中看到你的Ajax请求吗?它格式正确吗?它会得到回应吗?答案是否正确? – Quentin 2014-09-05 22:49:24

+0

什么是包含错误的行的整个错误消息 – Ahmad 2014-09-05 22:53:38

+0

是的,如果我使用单个文件格式化它很好,如果我使用多个文件它会返回索引的来源。 php而不是作业格式化阵列我只是不明白为什么它会这样做.. – clearcut89 2014-09-05 22:55:05

回答

0

我发现了什么问题,php.ini文件里面有我的文件上传服务器上的大小限制,我增加了,现在工作得很好。

任何有同样问题的人都会检查您的上传大小!

相关问题