2014-09-05 61 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文件裏面有我的文件上傳服務器上的大小限制,我增加了,現在工作得很好。

任何有同樣問題的人都會檢查您的上傳大小!

相關問題