Question

我使用ColdFusion后端脚本（https://gist.github.com/1116037提供）实现了plupload。

上传页面中的url属性为url：'.. / upload.cfc？method = upload'，这只是在cfc脚本中调用一个函数。它工作正常。此脚本还会创建一个名为“响应”的变量来保存上传的文件。

我遇到的问题是访问'response'变量中保存的信息。在将所有文件上传到服务器之后，我想在表格中显示该信息。

我正在使用queue_widget来满足我的需求'认为需要触发事件（onComplete）来调用函数来处理变量中的信息，但我不知道如何做到这一点。

我需要访问'response'变量中保存的信息，最好是在ColdFusion代码中。有没有人设法让plupload使用ColdFusion呢？

任何帮助，指导或编码都将不胜感激。

以下是我使用的完整代码：

这是主页 - queue_widget.cfm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Plupload - Queue widget example</title>
<link rel="stylesheet" href="../../js/jquery.plupload.queue/css/jquery.plupload.queue.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="../../js/plupload.js"></script>
<script type="text/javascript" src="../../js/plupload.flash.js"></script>
<script type="text/javascript" src="../../js/jquery.plupload.queue/jquery.plupload.queue.js"></script>
</head>
<body>
  <h1>Queue widget example</h1>
  <p>Shows the jQuery Plupload Queue widget and under different runtimes.</p>
  <div style="float: left; margin-right: 20px">
  <h3>Flash runtime</h3>
    <div id="flash_uploader" style="width: 700px;">Your browser does not have Flash installed!</div>
  </div>  
  <br style="clear: both" />
<cfoutput><cfset mnum=6></cfoutput>
<script type="text/javascript">
$(function() {
    // Setup flash version
$("#flash_uploader").pluploadQueue({
    // General settings
    runtimes : 'flash',
    url : '../upload.cfc?method=upload',
    max_file_size : '1mb',
    max_file_count: <cfoutput>#mnum#</cfoutput>, // You can limit the num of files that can be uploaded by manipulating the mnum variable above
    unique_names : false,
    multiple_queues : true,
    multi_selection: true,
    filters : [
        {title : "Image files", extensions : "jpg,gif,png"}
    ],
    init : {
        FilesAdded: function(up, files) {
            plupload.each(files, function(file) {
            if (up.files.length > <cfoutput>#mnum#</cfoutput>) {
                up.removeFile(file);
                }
            });
            if (up.files.length >= <cfoutput>#mnum#</cfoutput>) {
                $('#pickfiles').hide('slow');
            }
        },
        FilesRemoved: function(up, files) {
            if (up.files.length < 1) {
                $('#pickfiles').fadeIn('slow');
            }
        }
    },
    resize : {width : 300, height : 10000, quality : 90}, // forces images to be resized to a width of 300px if wider than 300px
    preinit: attachCallbacks,
    UploadComplete: function(up, file, response) {
        if ($("#result").length > 0){
            $("#results").prepend(info.response);
        } else {
            $("#flash_uploader").after("<div id='results'>"+info.response+"</div>");
        }
    },
    flash_swf_url : '../../js/plupload.flash.swf'
});
});
// Where should we go after upload
function attachCallbacks(Uploader){
    Uploader.bind('FileUploaded', function(Up, File, response){
        function IsJson(response) {
        alert('Response from server: ' + response.file); // for testing only
        counter++
        var newRow = '<tr><td><input type="hidden" name="file_'+counter+'" value="'+response.file+'">'
        newRow += 'Label the file: '+response.file+' <input type="text" name="filename_'+counter+'"></td></tr>'
        $("#detail").append(newRow)
    }});
};
</script>
<div id="results"></div>
<table id="detail">
</table>
<cfif IsDefined('response')><cfdump var="#response#"></cfif>
</body>
</html>

这是后端处理页面 - upload.cfc

<cfcomponent>
  <cffunction name="upload" access="remote" returntype="struct" returnformat="json" output="false">
    <cfscript>
      var uploadDir = expandPath('/uploads/'); // should be a temp directory that you clear periodically to flush orphaned files 
      var uploadFile =  uploadDir & arguments.NAME;
      var response = {'result' = arguments.NAME, 'id' = 0};
      var result = {};
    </cfscript>     

    <!--- save file data from multi-part form.FILE --->
    <cffile action="upload" result="result" filefield="FILE" destination="#uploadFile#" nameconflict="overwrite"/>

    <cfscript>
      // Example: you can return uploaded file data to client 
      response['size'] = result.fileSize;
      response['type'] = result.contentType;
      response['saved'] = result.fileWasSaved;
      return response;
    </cfscript>
  </cffunction>
</cfcomponent>

您可以在此处尝试以上示例：[url] www.turn2cash.co.uk/plupload/examples/jquery/queue_widget.cfm [/ url]

如上所述，该脚本适用于上传（在这种情况下）由mnum变量确定的最多6个图像。我需要帮助的是如何访问上传的文件（页面刷新）并能够操作它们。

我已经设置了一个例子（使用cffileupload），我在这里[url] www turn2cash.co.uk/a/index.cfm [/ url] 虽然这样可以正常工作，但它需要页面刷新，这正是我想要避免的。

请提供任何帮助。

2012年9月7日新增

我尝试了Miguel建议的两种方法，但没有取得任何积极成果。它们实际上导致UI根本不播种。但是我发现了这个并试了一下：

preinit: attachCallbacks,
        UploadComplete: function(up, file, response) {
            if ($("#result").length > 0){
                $("#results").prepend(info.response);
            } else {
                $("#flash_uploader").after("<div id='results'>"+info.response+"</div>");
            }
        },
        flash_swf_url : '../../js/plupload.flash.swf'
    });
});
// Where should we go after upload
function attachCallbacks(Uploader){
    Uploader.bind('FileUploaded', function(Up, File, Response){
        alert('Response from server: ' + Response.response);
});
};
</script>

我现在收到警告显示：

Response from server: {"saved":true,"result":"home.png","id":"0","size":"5988","type":"image"}

这至少证明cfc脚本正在工作，并且正在返回'response'可变。我仍然不知道如何利用这些信息，因为我不知道jquery，ajax或javascript。如果可以，请帮忙。

Answer 1

我之前发布的链接有示例代码。很抱歉发布此答案，但由于我没有代表，我无法发表评论。

我认为您的部分困惑在于请求处理。您的示例底部有这行代码。

<cfif IsDefined('response')><cfdump var="#response#"></cfif>

因为在对服务器进行javascript ajax调用以进行文件上传之前处理了coldfusion页面，所以永远不会触发。您需要在javascript中处理响应。

您是否从attachCallbacks函数中看到此警报？

alert('Response from server: ' + response.file); // for testing only

如何处理后端coldfusion处理脚本响应

1 个答案: