Blueimp jQuery File Upload 返回 html 而不是 json答案

【问题标题】：Blueimp jQuery File Upload returning html instead of jsonBlueimp jQuery File Upload 返回 html 而不是 json
【发布时间】：2014-02-05 23:02:20
【问题描述】：

我下载了blueimp Jquery-File-Upload 插件，除了将其配置为使用我的服务器（在 js/main.js 中）并更改上传目录的权限之外，它是默认设置。

当我选择一个文件并点击 chrome 中的上传时，它会显示：

Error SyntaxError: Unexpected token <

在 Firefox 中它说：

Error SyntaxError: JSON.parse: unexpected character

我检查了在我的服务器和演示服务器上使用它的区别，在我的服务器上的 firebug POST 返回的是整个 index.html：

<!DOCTYPE HTML>
<!--
/*
 * jQuery File Upload Plugin Demo 7.4
 * https://github.com/blueimp/jQuery-File-Upload
 *
 * Copyright 2010, Sebastian Tschan
....

但在演示服务器上它返回 JSON 数据：

{"files":[{"url":"http://jquery-file-upload.appspot.com/AMIfv97-LLxfuAdNifW5y8e1aHvb7HOkXdAC98NXM2Z_exEt27wxS5C4ZEzyd8BDGdZ8SHFQmbNquPIA7DIDvIMP60FvAxc6awXi--OF4z9OPbCCJquPG6hPyMyaheg9_mPpg_MdSQxuI-qczS6EFVSDOJ3qyU1AcrdM1O1WRKVNlD0gJhvYxuI/boot.png","thumbnail_url":"http://lh3.ggpht.com/HzbIhw7LOI7ltQJguWkvYCaQyNjnvkHTjbbxiZecFwi-pss98mjchv5KtoN_yVTqCvzwZj8WQHPB5u1BHOsZbxYPJBSf6XbxRg=s80","name":"boot.png","type":"image/png","size":172728,"delete_url":"http://jquery-file-upload.appspot.com/AMIfv97-LLxfuAdNifW5y8e1aHvb7HOkXdAC98NXM2Z_exEt27wxS5C4ZEzyd8BDGdZ8SHFQmbNquPIA7DIDvIMP60FvAxc6awXi--OF4z9OPbCCJquPG6hPyMyaheg9_mPpg_MdSQxuI-qczS6EFVSDOJ3qyU1AcrdM1O1WRKVNlD0gJhvYxuI/boot.png?delete=true","delete_type":"DELETE"}]}

这是我更改的 js/main.js 的修改部分：

if (window.location.hostname === 'example.com') {
    // Demo settings:
    $('#fileupload').fileupload('option', {
        url: '//example.com/script-location/',
        maxFileSize: 5000000,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        process: [
            {
                action: 'load',
                fileTypes: /^image\/(gif|jpeg|png)$/,
                maxFileSize: 20000000 // 20MB
            },
            {
                action: 'resize',
                maxWidth: 1440,
                maxHeight: 900
            },
            {
                action: 'save'
            }
        ]
    });
    // Upload server status check for browsers with CORS support:
    if ($.support.cors) {
        $.ajax({
            url: '//example.com/script-location/',
            type: 'HEAD'
        }).fail(function () {
            $('<span class="alert alert-error"/>')
                .text('Upload server currently unavailable - ' +
                        new Date())
                .appendTo('#fileupload');
        });
    }
} else {

除此之外，我所做的唯一其他更改是在 index.html 中让表单操作指向我的脚本。 apache error_log 中没有错误。

我确定我错过了什么，但我似乎找不到它。

附加信息：PHP 版本 5.3.20 / Apache/2.2.22 (Fedora)

如果有任何其他有用的相关代码，请告诉我，我会更新这篇文章。任何帮助将不胜感激。

【问题讨论】：

服务器需要做一个 JSON 响应并发回。因此，当您调用“example.com/script_location”时，PHP 代码应返回格式正确的 JSON。文件上传组件也有一些示例服务器端代码：github.com/blueimp/jQuery-File-Upload/tree/master/server/php
在 js/main.js 里面有 url: 'server/php'，它指向 server/php/index.php。是否必须对其进行修改才能正常工作？我简单地看了一下，它看起来像是创建了一个新的 UploadHandler()，但我没有看到那里产生任何错误，我也没有修改任何代码。
由于您更改了文件上传组件的“url”属性，只需确保将 UploadHandler 功能也放在“//example.com/script-location/”。
我相信所有的路径都设置正确。我检查了我的 access_log，只看到加载页面时的初始 index.html 命中，以及单击上传后的 POST。 error_log 为空。据我所知，它甚至没有进入 php 代码。

标签： jquery jquery-file-upload

【解决方案1】：

好吧，我想通了，我更改为服务器名称的 window.location.hostname 仅用于演示，并且必须单独放置（或完全删除）。不知道我最初是怎么错过的，但希望如果其他人犯了这个错误，这会有所帮助。

if (window.location.hostname === 'blueimp.github.com') {
    // Demo settings:
    $('#fileupload').fileupload('option', {
        url: '//jquery-file-upload.appspot.com/',
        maxFileSize: 5000000,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        process: [
            {
                action: 'load',
                fileTypes: /^image\/(gif|jpeg|png)$/,
                maxFileSize: 20000000 // 20MB
            },
            {
                action: 'resize',
                maxWidth: 1440,
                maxHeight: 900
            },
            {
                action: 'save'
            }
        ]
    });
    // Upload server status check for browsers with CORS support:
    if ($.support.cors) {
        $.ajax({
            url: '//jquery-file-upload.appspot.com/',
            type: 'HEAD'
        }).fail(function () {
            $('<span class="alert alert-error"/>')
                .text('Upload server currently unavailable - ' +
                        new Date())
                .appendTo('#fileupload');
        });
    }

Has 可以单独放置，也可以完全删除。

【讨论】：

【解决方案2】：

你可以在 localhost(xampp) 中试试这段代码

if (window.location.hostname === 'localhost') //blueimp.github.io
{
    // Demo settings:
    $('#fileupload').fileupload('option', {
        url: '//localhost/Upload/server/php/',
        // Enable image resizing, except for Android and Opera,
        // which actually support image resizing, but fail to
        // send Blob objects via XHR requests:
        disableImageResize: /Android(?!.*Chrome)|Opera/
            .test(window.navigator.userAgent),
        maxFileSize: 25000000,
        acceptFileTypes: /(\.|\/)(mp4|mpeg|mpeg1|3gp|gif|jpe?g|png)$/i
    });

    // Upload server status check for browsers with CORS support:
    if ($.support.cors) {
        $.ajax({
            url: '//localhost/Upload/server/php/',
            type: 'HEAD'
        }).fail(function () {
            $('<span class="alert alert-error"/>')
                .text('Upload server currently unavailable - ' +
                        new Date())
                .appendTo('#fileupload');
        });
    }

    // Load existing files:
        $('#fileupload').addClass('fileupload-processing');
        $.ajax({
            // Uncomment the following to send cross-domain cookies:
            //xhrFields: {withCredentials: true},
            url: $('#fileupload').fileupload('option', 'url'),
            dataType: 'json',
            context: $('#fileupload')[0]
        }).always(function () {
            $(this).removeClass('fileupload-processing');
        }).done(function (result) {
            $(this).fileupload('option', 'done')
                .call(this, null, {result: result});
        });
}

【讨论】：

【解决方案3】：

只需将 blueimp.github.com 替换为您的域名 (yourdomain.com)。

【讨论】：