Question

我一直关注youtube上的视频教程进行AJAX上传，我知道相当多的javascript，jquery等等，但这让我很难过。

我的代码如下，当我尝试上传多个文件或某些情况下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，我不想快速修复，而是回答为什么这不起作用？

由于本

Answer 1

我发现问题是什么，在php.ini文件中，我的服务器上有文件上传的大小限制，我增加了它，现在工作正常。

其他有相同问题的人会检查您的上传大小！

未捕获的SyntaxError：意外的令牌＆lt;

1 个答案: