FineUploader 未能 POST

Question

我正在尝试使用 FineUploader 实现文件上传。除了实际上传之外，一切正常 - 当我 select 一个文件时，它会立即添加到页面上说 "Upload failed"。查看 Firefox 检查器中的网络选项卡，甚至没有 POST 请求发生，我从 FineUploader 收到一条错误消息，说响应无效 JSON（看图）。

这是我的客户端（部分）视图：

<div id="fine-uploader"></div>

@* This section is rendered into the page header *@
@section Scripts {
    <script src="/Scripts/fine-uploader/jquery.fine-uploader.js"></script>
    <link href="/Scripts/fine-uploader/fine-uploader-new.css" rel="stylesheet" />

    @* The following template is copied from the Validation example at https://fineuploader.com/demos.html in the jQuery tab *@
    <script type="text/template" id="qq-template">
        <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
            <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
                <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
            </div>
            <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                <span class="qq-upload-drop-area-text-selector"></span>
            </div>
            <div class="qq-upload-button-selector qq-upload-button">
                <div>Select files</div>
            </div>
            <span class="qq-drop-processing-selector qq-drop-processing">
                <span>Processing dropped files...</span>
                <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
            </span>
            <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
                <li>
                    <div class="qq-progress-bar-container-selector">
                        <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
                    </div>
                    <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                    <img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
                    <span class="qq-upload-file-selector qq-upload-file"></span>
                    <span class="qq-upload-size-selector qq-upload-size"></span>
                    <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
                    <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
                    <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
                    <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
                </li>
            </ul>

            <dialog class="qq-alert-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">Close</button>
                </div>
            </dialog>

            <dialog class="qq-confirm-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">No</button>
                    <button type="button" class="qq-ok-button-selector">Yes</button>
                </div>
            </dialog>

            <dialog class="qq-prompt-dialog-selector">
                <div class="qq-dialog-message-selector"></div>
                <input type="text">
                <div class="qq-dialog-buttons">
                    <button type="button" class="qq-cancel-button-selector">Cancel</button>
                    <button type="button" class="qq-ok-button-selector">Ok</button>
                </div>
            </dialog>
        </div>
    </script>    
}

<script>
    $("#fine-uploader").fineUploader({
        template: "qq-template",
        request: {
            // Generates the following absolute URL (have also tried relative, neither work)
            // http://localhost:49450/MyController/UploadFile
            endpoint: "@Url.Action("UploadFile", "My", null, Request.Url.Scheme)"
        },
        debug: true,
        thumbnails: {
            placeholders: {
                waitingPath: "@Url.Content("~/Scripts/fine-uploader/placeholders/waiting-generic.png")",
                notAvailablePath: "@Url.Content("~/Scripts/fine-uploader/placeholders/not_available-generic.png")"
            }
        },
        validation: {
            allowedExtensions: ["jpg", "png"],
            sizeLimit: 1048576 // 1 MB = 1024 * 1024 bytes
        },
        text: {
            fileInputTitle: ""
        }
    });
</script>

还有我的 MVC 4 控制器代码（FineUpload 是来自同名 nuget 包的 class）：

public class MyController : Controller {
    // This method is never being hit
    [HttpPost]
    public FineUploaderResult UploadFile(FineUpload qqfilename) {
        return new FineUploaderResult(true);
    }
}

这是尝试上传后 Firefox 的控制台日志（我省略了在此之前关于缩略图加载等的所有成功消息）：

[Fine Uploader 5.16.2] Sending simple upload request for 0
util.js:236:16
[Fine Uploader 5.16.2] xhr - server response received for 0
util.js:236:16
[Fine Uploader 5.16.2] responseText =
util.js:236:16
[Fine Uploader 5.16.2] Received response status 0 with body:
util.js:236:16
[Fine Uploader 5.16.2] Error when attempting to parse xhr response text (JSON.parse: unexpected end of data at line 1 column 1 of the JSON data)
util.js:241:20
[Fine Uploader 5.16.2] Simple upload request failed for 0
util.js:236:16

代码对我来说看起来不错，但网络 activity 日志显示根本没有 POST 请求。为什么会这样？

Answer 1

终于解决了这个问题。事实证明这是 AdBlock 扩展程序的问题 - 禁用它可以解决问题。当然这不是一个真正的解决方案，因为很多人使用 AdBlock，所以我发现通过将请求端点更改为控制器的 Index 页面 (/My/Index) 它会成功命中该方法（并且 return responseText = 行中的标记），所以我只调用了我的上传方法 Index （这是 MVC 允许的，因为上传方法响应 POST 并且实际索引响应GET) 和 ta-da，一切正常。

有史以来最奇怪的错误。

FineUploader 未能 POST

FineUploader failing to POST

asp.net-mvc

file-upload

fine-uploader