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中，我会得到一个打开/保存对话框，其中包含当前的内容.

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 ，文件名， 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 如下所示，只是返回成功"(如果适用):

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应该为文本/纯文本".有关更多详细信息，请参见服务器端自述文件.
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屋！