Fine Uploader - 未从加载的 iframe 收到有效消息

Question

正在尝试使现有的 fine uploader v4.2.2 实例与 IE8 一起使用，但它返回 "No valid message received from loaded iframe"。

通读 3.3 和 3.7 CORS support 博客文章 - 修改了我的 .net MVC 处理程序以检测非 XHR 请求并做出相应的反应。在客户端已经将 CORS 属性 "expected" 设置为 true，但尝试将 "sendCredentials" 和 "allowXdr" 的组合设置为 true 但没有明显效果。

使用 Fiddler 确认我正在返回正确的内容类型 (text/html) 并且通常的 JSON 响应后跟一个指向 URL 的有效 URL 的脚本块=48=] - 尝试在主 URL 和上传处理程序子域上托管。

一切在当前浏览器中仍然运行良好，只是感觉我在尝试 IE8 支持时遗漏了一些明显的东西。

这是我清理过的 JS；

var fupParams = {
    userId: 12345,
    userKey: 67890
};

var fupInstance = $("#fine-uploader")
    .fineUploader({
        template: "qq-template",
        thumbnails: {
            placeholders: {
                waitingPath: "/placeholders/waitingPath.gif",
                notAvailablePath: "/placeholders/notAvailablePath.gif"
            }
        },
        session: {
            endpoint: "//upload.example.com/Upload/List",
            params: fupParams
        },
        request: {
            endpoint: "//upload.example.com/Upload/Upload",
            params: fupParams
        },
        failedUploadTextDisplay: {
            mode: "custom"
        },
        deleteFile: {
            customHeaders: {},
            enabled: true,
            endpoint: "//upload.example.com/Upload/Delete",
            method: "DELETE",
            forceConfirm: true,
            params: fupParams
        },
        validation: {
            allowedExtensions: Array("jpg","png")
        },
        cors: {
            expected: true,
            sendCredentials: false
        },
        autoUpload: true,
        editFilename: {
            enabled: true
        },
        classes: {
            success: "alert alert-success",
            fail: "alert alert-error"
        },
        showMessage: function (message) {
            // Simple event handler
        }
    })
    .on("submit", function (event, id, name) {
        // Use qq.Promise() to modify fupParams prior to upload
    })
    .on("submitDelete", function (event, id, name) {
        // Use qq.Promise() to modify fupParams prior to delete
    })
    .on("error", function (event, id, name, errorReason, xhrOrXdr) {
        // Simple event handler
    })
    .on("complete", function (event, id, name, response) {
        // Simple event handler
    })
    .on("sessionRequestComplete", function (event, response, success, xhrOrXdr) {
        // Simple event handler
    })
    .on("deleteComplete", function (event, id, xhrOrXdr, isError) {
        // Simple event handler
    })
;

包括两个通过 Fiddler 捕获的上传处理程序响应，第一个成功设置为 false，因为我选择的图像太小；

HTTP/1.1 200 OK
Cache-Control: private
Content-Type: text/html; charset=utf-8
Server: Microsoft-IIS/7.5
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Headers: Content-Type, cache-control, x-requested-with
Access-Control-Allow-Credentials: false
Date: Tue, 17 Mar 2015 12:47:54 GMT
Content-Length: 204

{
  "success": false,
  "error": "Minimum upload size is 150 KB, \"Winter.jpg\" was 103 KB"
}<script src="//www.example.com/fineuploader-4.2.2/iframe.xss.response.js"></script>

之后 IE 立即获取 "waitingPath.gif" 和 "iframe.xss.response.js"，但我没有看到任何自定义错误文本 - 只有 "No valid message" 错误。

由于图像较大，第二次捕获成功设置为 true，我们返回一些自定义参数，结果与上面相同。

HTTP/1.1 200 OK
Cache-Control: private
Content-Type: text/html; charset=utf-8
Server: Microsoft-IIS/7.5
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Headers: Content-Type, cache-control, x-requested-with
Access-Control-Allow-Credentials: false
Date: Tue, 17 Mar 2015 12:51:18 GMT
Content-Length: 278

{
  "pageList": [],
  "name": "Winter 2.JPG",
  "uuid": "2563",
  "size": 281,
  "thumbnailUrl": null,
  "pageCount": 0,
  "success": true,
  "newUuid": "2563"
}<script src="//www.example.com/fineuploader-4.2.2/iframe.xss.response.js"></script>

编辑：感谢您的帮助，我的回答要么错误地使用了 UUID，要么完全遗漏了它 - 最终结果见下文。

成功

HTTP/1.1 200 OK
Cache-Control: private
Content-Type: text/html; charset=utf-8
Server: Microsoft-IIS/7.5
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Headers: Content-Type, cache-control, x-requested-with
Access-Control-Allow-Credentials: false
Date: Tue, 17 Mar 2015 15:01:57 GMT
Content-Length: 310

{
  "pageList": [],
  "name": "Winter 2.JPG",
  "newUuid": "2567",
  "size": 281,
  "thumbnailUrl": null,
  "pageCount": 0,
  "success": true,
  "uuid": "6cb9f309-0c38-4a73-aa13-879abbfff008"
}<script src="//www.example.com/addin/fineuploader-4.2.2/iframe.xss.response.js"></script>

失败

HTTP/1.1 200 OK
Cache-Control: private
Content-Type: text/html; charset=utf-8
Server: Microsoft-IIS/7.5
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Headers: Content-Type, cache-control, x-requested-with
Access-Control-Allow-Credentials: false
Date: Tue, 17 Mar 2015 15:01:43 GMT
Content-Length: 255

{
  "success": false,
  "uuid": "61a4e504-4b89-4b67-ad38-df23d7c4a247",
  "error": "Minimum upload size is 150 KB, \"Winter.jpg\" was 103 KB"
}<script src="//www.example.com/addin/fineuploader-4.2.2/iframe.xss.response.js"></script>

Answer 1

由于缺少 uuid 参数，第一个响应未正确解析。第二个回应看起来有点奇怪。 “2563”是 Fine Uploader 在请求中发送的 UUID，还是您要分配给文件的新 UUID？响应中的 "uuid" 和 "newUuid" 参数都具有相同的值。根据您正在响应的请求，此响应中的 UUID 必须与文件的 UUID 相匹配。

不清楚这里是否存在问题，但是 "uuid" 和 "newUuid" 匹配表明您的代码存在问题或您有误解。

Fine Uploader - 未从加载的 iframe 收到有效消息

Fine Uploader - No valid message received from loaded iframe

javascript

internet-explorer-8

fine-uploader