FineUploader OnComplete方法未触发.新手,需要一些手握

Ric*_*eMN 4 json callback complete fine-uploader

所以,我在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 + '">');
                }
            }
    }
}
Run Code Online (Sandbox Code Playgroud)

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

端点触发,文件/参数被填充,所以这一切都很好!验证不会阻止用户选择此列表之外的内容,但我暂时可以使用此功能.我可以成功保存并执行上传所需的操作,而不是启动OnComplete.实际上,在IE中,我得到了一个OPEN/SAVE对话框.

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

我不这样做(填充这些参数),我在C#中的输出方法返回JsonResult看起来像这样,只返回'success'(如果适用):

return Json(new { success = true });  
Run Code Online (Sandbox Code Playgroud)

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

我错过了什么,或者有什么不对?我相信这对其他人也有帮助,所以我希望你能花时间和协助.我很感激!谢谢.

Ray*_*lus 10

解决问题中的项目:

  1. 关于"选择文件"对话框内的限制,还必须设置acceptFiles验证选项.有关详细信息,请参阅validation自述文件中选项部分.
  2. 您的validation选项属性在错误的地方.它不应该在request属性/选项下.这同样适用于你的真实text,multiplecallbacks选项/属性.此外,您没有正确设置jQuery插件的回调.
  3. IE中的打开/保存对话框是由服务器未返回具有正确"Content-Type"标头的响应引起的.您的回复内容类型应为"text/plain".有关更多详细信息,请参阅服务器端自述文件.
  4. JSON.parse当处理响应客户端时,Fine Uploader将使用您的服务器返回的任何内容进行解析.调用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 + '">');
       }
   });                              
Run Code Online (Sandbox Code Playgroud)