4

所以，我在 MVC 4 应用程序中使用 FineUploader 3.3，这是一个非常酷的插件，非常物有所值。现在，我只需要让它正常工作。

我对 MVC 很陌生，对传回 JSON 也很陌生，所以我需要一些帮助才能让它工作。这是我正在使用的，全部在doc.ready.

var manualuploader = $('#files-upload').fineUploader({
request:
{
    endpoint: '@Url.Action("UploadFile", "Survey")',
    customHeaders: { Accept: 'application/json' },
    params: {
        //variables are populated outside of this code snippet
        surveyInstanceId: (function () { return instance; }),
        surveyItemResultId: (function () { return surveyItemResultId; }),
        itemId: (function () { return itemId; }),
        imageLoopCounter: (function () { return counter++; })
    },
    validation: {
        allowedExtensions: ['jpeg', 'jpg', 'gif', 'png', 'bmp']
    },
    multiple: true,
    text: {
        uploadButton: '<i class="icon-plus icon-white"></i>Drop or Select Files'
    },                              
    callbacks: {
        onComplete: function(id, fileName, responseJSON) {
            alert("Success: " + responseJSON.success);
            if (responseJSON.success) {
                $('#files-upload').append('<img src="img/success.jpg" alt="' + fileName + '">');
                }
            }
    }
}

编辑：我一直在使用 Internet Explorer 9，然后切换到 Chrome、Firefox，我可以上传就好了。IE9 需要什么？无论浏览器如何，验证都不起作用。

端点触发，并填充文件/参数，所以这一切都很好！验证不会阻止用户选择此列表之外的内容，但我暂时可以使用它。我可以成功保存并做我需要做的上传，减去OnComplete触发。实际上，在 IE 中，我得到了一个包含当前内容的 OPEN/SAVE 对话框。

onComplete问题： ( id, filename, )中的函数参数是responseJSON由返回填充还是在输出填充？我只是对此感到困惑。我的 JSON 是否必须在其中包含这些参数并填充？

我不这样做（填充那些参数），我在 C# 中的输出方法返回JsonResult看起来像这样，只返回“成功”（如果合适的话）：

return Json(new { success = true });

我需要添加更多吗？这条线是在保存之后，我想做的就是告诉用户一切都好还是不好。success我的 JSON 中的属性是否与responseJSON.success?

我错过了什么，或者有什么问题？

4

1 回答 1

10

解决您问题中的项目：

  1. 关于“选择文件”对话框内的限制，您还必须设置acceptFiles验证选项。有关详细信息，请参阅validation自述文件中的选项部分。
  2. 您的validation选项属性在错误的位置。它不应该在request属性/选项下。您的text、multiple和callbacks选项/属性也是如此。此外，您没有为 jQuery 插件正确设置回调。
  3. IE 中的打开/保存对话框是由于您的服务器没有返回带有正确“Content-Type”标头的响应。您的回复的 Content-Type 应该是“text/plain”。有关详细信息，请参阅服务器端自述文件。
  4. 您的服务器在其响应中返回的任何内容都将由 Fine UploaderJSON.parse在处理响应客户端时使用。调用JSON.parse服务器响应的结果将作为responseJSON参数传递给onComplete回调处理程序。如果您想将特定信息从您的服务器传递到您的客户端代码，例如您可能希望在客户端显示的一些文本、上传文件的新名称等，您可以通过向您的服务器响应。然后，这些数据将在您的onComplete处理程序中提供给您。如果您对此没有任何需求，您可以简单地返回您当前返回的“成功”响应。我链接到的服务器端自述文件提供了有关所有这些的更多信息。

为了澄清我在 #2 中所说的内容，您的代码应如下所示：

$('#files-upload').fineUploader({
   request: {
       endpoint: '@Url.Action("UploadFile", "Survey")',
       customHeaders: { Accept: 'application/json' },
       params: {
           //variables are populated outside of this code snippet
           surveyInstanceId: (function () { return instance; }),
           surveyItemResultId: (function () { return surveyItemResultId; }),
           itemId: (function () { return itemId; }),
           imageLoopCounter: (function () { return counter++; })
       }
   },
   validation: {
       allowedExtensions: ['jpeg', 'jpg', 'gif', 'png', 'bmp']
   },
   text: {
       uploadButton: '<i class="icon-plus icon-white"></i>Drop or Select Files'
   }
})
   .on('complete', function(event, id, fileName, responseJSON) {
       alert("Success: " + responseJSON.success);
       if (responseJSON.success) {
          $('#files-upload').append('<img src="img/success.jpg" alt="' + fileName + '">');
       }
   });
于 2013-03-12T18:46:30.483 回答