-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,我不希望速戰速決,而是一個回答爲什麼這不起作用?
感謝 本
看看你的瀏覽器的開發者工具。你能在Net標籤中看到你的Ajax請求嗎?它格式正確嗎?它會得到迴應嗎?答案是否正確? – Quentin 2014-09-05 22:49:24
什麼是包含錯誤的行的整個錯誤消息 – Ahmad 2014-09-05 22:53:38
是的,如果我使用單個文件格式化它很好,如果我使用多個文件它會返回索引的來源。 php而不是作業格式化陣列我只是不明白爲什麼它會這樣做.. – clearcut89 2014-09-05 22:55:05