Question

我正在关注这些视频（https://www.youtube.com/watch?v=Be-GSVO7PGQ&index=9&list=PLfdtiltiRHWHCzhdE0N1zmeFHlEuqxQvm），以便在我的网站上创建一个jquery上传页面。

我在Chrome上收到以下错误：

未捕获的SyntaxError：意外的输入结束

我在Firefox Firebug上收到以下错误：

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

目前，我的代码如下所示：

upload.php的：

    <form action="upload_process.php" method="post" enctype="multipart/form-data" id="upload" class="upload">
    <fieldset>
        <legend><h3>Upload files</h3></legend>
        <input type="file" id="file_upload" name="file_upload[]" required multiple>
        <input type="submit" id="submit_upload" name="submit_upload" value="Upload">


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

        <div id="uploads" class="uploads">
            Uploaded files will appear here.
        </div>
    </fieldset>
</form>
<script src="js/upload.js"></script>
<script>
    document.getElementById('submit_upload').addEventListener('click', function(e) {
        e.preventDefault();

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

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

            finished: function(data) {
                console.log(data);
            },

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

upload.js

    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);
                    console.log(uploaded);
                }

                if (typeof o.options.finished === 'function') {
                    o.options.finished(uploaded);
                }
            } else {
                if (typeof o.options.error === 'function') {
                    o.options.error(uploaded);
                }
            }
        });

        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);
    };

    setProgress = function(value) {

    };

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

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

和我的upload_process.php

<?php
//require_once('core/init.php');
header('Content-Type: application/json');

$uploaded = [];
$allowed = ['mp4', 'png', 'bmp', 'mp3', 'txt'];

$succeeded = [];
$failed = [];

if (!empty($_FILES['file_upload'])) {
    foreach($_FILES['file_upload']['name'] as $key => $name) {
        if ($_FILES['file_upload']['error'][$key] === 0) {
            $temp = $_FILES['file_upload']['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) {
                $succeeded[] = array(
                    'name' => $name,
                    'file' => $file
                );

                $db = new DB();
                $user = new User();
                $units = new Units();

                $size = filesize("uploads/" . $file);

                $formattedSize = $units->formatSizeUnits($size);

                $db->insert('files', array(
                    'user_id' => $user->data()->id,
                    'name' => $name,
                    'size' => $formattedSize,
                    'address' => 'uploads/' . $file . '',
                    'created' => date('Y-m-d H:i:s'),
                    'type' => $ext
                ));
                /*Redirect::to('index');
                Session::flash('');*/

            } else {
                $failed[] = array(
                    'name' => $name
                );
            }
        }
    }
    if (!empty($_POST['ajax'])) {
        echo json_encode(array(
            'succeeded' => $succeeded,
            'failed' => $failed
        ));
    }
}

我知道这个问题可能是：

uploaded = JSON.parse(this.response);

this.response什么都不返回。我无法弄清楚为什么它什么都不返回。

Jquery文件上传JSON空错误

0 个答案: