Question

我想学习JavaScript，并尝试创建一个多Ajax上传器。我遇到了这个错误：在谷歌浏览器中：

Uncaught SyntaxError：意外的输入结束，

在Mozilla Firebug中

SyntaxError：JSON.parse：JSON数据第1行第1列的意外数据结尾

uploaded = JSON.parse（this.response）;

我的JavaScript文件

 var app = app || {};

(function(o) {
"use strict";

var ajax, getFormData, setProgress;

ajax = function(data) {
    var xmlhttp = new XMLHttpRequest(), uploaded;

    xmlhttp.addEventListener('readystatechange', function() {
        if (this.readyState === 4) {
            if (this.status === 200) {
                uploaded = JSON.parse(this.response);//this is where error occurs
                if (typeof o.options.finished === 'function') {
                    o.options.finished(uploaded);
                }
            } else {
                if (typeof o.options.error === 'function') {
                    o.options.error();
                }
            }
        }
    });

    xmlhttp.upload.addEventListener('progress', function(event) {
        var percent;

        if (event.lengthComputable === true) {
            percent = Math.round((event.loaded / event.total) * 100);
            setProgress(percent);
        }
    });

    xmlhttp.open('post', o.options.processor);
    xmlhttp.send(data);
};

getFormData = function(source) {
    var data = new FormData(), i;

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

    data.append('ajax', true);
    return data;
};

setProgress = function(value) {
    if (o.options.progressBar !== undefined) {
        o.options.progressBar.style.width = value ? value + '%' : 0;
    }
    if (o.options.progressText !== undefined) {
        o.options.progressText.innerText = value ? value + '%' : '';
    }
};

o.uploader = function(options) {
    o.options = options;

    if (o.options.files !== undefined) {
        ajax(getFormData(o.options.files.files));
    }
  };
}(app));

我的Php文件

<?php
header('Content-Type:application/json');

$uploaded = [];
$allowed = ['MP4','PNG','JPG'];

$succeded = [];
$failed = [];

if (!empty($_FILES['file'])) {
foreach ($_FILES['file']['name'] as $key => $name) {
    if ($_FILES['file']['error'][$key] === 0) {

        $temp = $_FILES['file']['tmp_name'][$key];
        $ext = explode('.', $name);
        $ext = strtolower(end($ext));

        $file = md5_file($temp) . time() . '.' . $ext;

        if (in_array($ext, $allowed) === true && move_uploaded_file($temp, "uploads/{$file}") === true) {
            $succeded[]  = array(
                'name' => $name,
                'file' => $file
            );
        } else {
            $failed[] = array(
                'name' => $name
            );
        }
    }
}
if (!empty($_POST['ajax'])) {
    echo json_encode(array(
        'succeded' => $succeded,
        'failed' => $failed
    ));
 }
}

的index.php

<!DOCTYPE html>
<html>
<head> 
<meta charset ="UTF-8"/>
<title>Ajax Uploader</title>
<link rel="stylesheet" href="global.css"/>
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data"  id="upload" class="upload">
    <fieldset>
        <legend>Upload files</legend>
        <input type="file" id="file" name="file[]" required multiple>
        <input type="submit" id="submit" name="submit" value="upload">
    </fieldset>

    <div class="bar">
        <span class="bar-fill" id="pb"><span class="bar-fill-text" id ="pt"></span></span>      
    </div>

    <div id="uploads" class="uploads">
        Uploaded file links will appear here.
    </div>
</form>
<script type="text/javascript" src="upload.js"></script>
<script type="text/javascript">
    document.getElementById('submit').addEventListener('click', function(e) {
        e.preventDefault();

        var f = document.getElementById('file'),
            pb = document.getElementById('pb'),
            pt = document.getElementById('pt');

        app.uploader({
            files: f,
            progressBar: pb,
            progressText: pt,
            processor: 'upload.php',

            finished: function(data) {
                var uploads = document.getElementById('upload'),
                    succeeded = document.createElement('div'),
                    failed = document.createElement('div'),

                    anchor,
                    span,
                    x;

                    if (data.failed.length) {
                        failed.innerHTML = '<p>Unfortunately, the following is an error:</p>';
                    }

                    uploads.innerText = '';

                    for (x = 0;x < data.succeeded.length;x= x + 1) {
                        anchor = document.createElement('a');
                        anchor.href ='uploads/' + data.succeeded[x].file;
                        anchor.innerText = data.succeeded[x].name;
                        anchor.target = '_blank';

                        succeeded.appendChild(anchor);
                    }

                    for (x = 0; x < data.failed.length; x = x + 1) {
                        span = document.createElement('span');
                        span.innerText = data.failed[x].name;

                        failed.appendChild(span);
                    }

                    uploads.appendChild(succeeded);
                    uploads.appendChild(failed);
            },

            error: function() {
                console.log('not working');
            }
        });
    });
</script>

任何想法？

未捕获的语法错误：输入Javascript的意外结束

0 个答案: