FineUploader OnComplete 方法未触发 [英] FineUploader OnComplete method not firing

问题描述

所以，我在 MVC 4 应用程序中使用 FineUploader 3.3，这是一个非常酷的插件，非常值得象征性的成本.现在，我只需要让它正常工作.

So, I'm using FineUploader 3.3 within a MVC 4 application, and this is a very cool plugin, well worth the nominal cost. Now, I just need to get it working correctly.

我对 MVC 还很陌生，对传回 JSON 也完全陌生，所以我需要一些帮助才能让它发挥作用.这是我正在使用的，都在 doc.ready 中.

I'm pretty new to MVC and absolutely new to passing back JSON, so I need some help getting this to work. Here's what I'm using, all within 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 对话框.

Endpoint fires, and file/parameters are populated, so this is all good! Validation doesn't stop a user from selecting something outside of this list, but I can work with this for the time being. I can successfully save and do what I need to do with my upload, minus getting the OnComplete to fire. Actually, in IE, I get an OPEN/SAVE dialog with what I have currently.

问题:onComplete (id, filename, responseJSON) 中的函数参数是否由回来还是在路上?我只是对此感到困惑.我的 JSON 中是否必须包含这些参数并进行填充?

Question: Are the function parameters in onComplete (id, filename, responseJSON) getting populated by the return or on the way out? I'm just confused about this. Does my JSON have to have these parameters in it, and populated?

我不这样做(填充这些参数)，我在 C# 中的输出方法返回 JsonResult 看起来像这样，只是返回成功"(如果合适):<​​/p>

I don't do this (populate those parameters), and my output method in C# returns JsonResult looking like this, just returning 'success' (if appropriate):

return Json(new { success = true });  

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

Do I need to add more? This line is after the saving takes place, and all I want to do is tell the user all is good or not. Does the success property in my JSON match up with the responseJSON.success?

我遗漏了什么或有什么问题?

What am I missing, or have wrong?

推荐答案

解决问题中的项目:

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

1. Regarding restrictions inside of the "select files" dialog, you must also set the acceptFiles validation option. See the validation option section in the readme for more details.
2. Your validation option property in the wrong place. It should not be under the request property/option. The same is true for your text, multiple, and callbacks options/properties. Also, you are not setting your callbacks correctly for the jQuery plug-in.
3. The open/save dialog in IE is caused by your server not returning a response with the correct "Content-Type" header. Your response's Content-Type should be "text/plain". See the server-side readme for more details.
4. Anything your server returns in it's response will be parsed by Fine Uploader using JSON.parse when handling the response client-side. The result of invoking JSON.parse on your server's response will be passed as the responseJSON parameter to your onComplete callback handler. If you want to pass specific information from your server to your client-side code, such as some text you may want to display client-side, the new name of the uploaded file, etc, you can do so by adding appropriate properties to your server response. This data will then be made available to you in your onComplete handler. If you don't have any need for this, you can simply return the "success" response you are currently returning. The server-side readme, which I have linked to, provides more information about all of this.

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

To clarify what I have said in #2, your code should look like this:

$('#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 + '">');
       }
   });                              

这篇关于FineUploader OnComplete 方法未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！