使用 jquery 和 Coldfusion cffile 上传多个文件答案

【问题标题】：Upload multiple files with jquery and coldfusion cffile使用 jquery 和 Coldfusion cffile 上传多个文件
【发布时间】：2013-10-09 08:40:13
【问题描述】：

不是一个真正的问题...只是想在某个地方发布这个，因为我在其他地方找不到它。现在我已经拼凑了一个我认为我会分享的工作演示。这同样适用于 Coldfusion 和 Railo CFML 服务器。

对于 CFML 开发人员来说，问题是 CFFILE 不适用于 <input type="file" multiple> ... 传统上，如果您想上传 3 个文件并在后端使用 CFFILE，则必须在您的文件中包含 3 个单独的文件输入调用页面。

为了简单起见，这是我的解决方案。它使用 Jquery $.ajax 对 CFFILE 进行多次调用，并将结果返回到调用页面上的 div。我确信有更好的方法可以做到这一点，我的代码可能是一个完整的 hack，但下面的示例有效。希望这可以帮助某人。

multiFileUpload.cfm

<!DOCTYPE html>
<CFPARAM Name="URL.contractID" defualt="">
<head>
<title>Multi File Upload</title>
<script>
$( document ).ready(function() {
       $('#submitFrm').on("click", function(e){
        e.preventDefault();

            //The jquery.each() statement loops through all the files selected by user
    $.each($('#multiFile')[0].files, function(i, file) {
           var data = new FormData(); 
               data.append('file-0', file);
           ajaxUpload(data);
            }); //end .each statement       

        }); //end submitFrm's click function 

        function ajaxUpload(data){
        console.log("ajaxUpload function called");
        $.ajax({url: "multiFileUploadAction.cfm",
        data: data,
        cache: false,
        contentType: false, //this is need for this to work with coldfusion
        processData: false, //this is need for this to work with coldfusion
        type: 'POST',
        success: function(returnData){
             console.log(returnData);
                             //here is where you would update your calling
                             //page if successfull 
                             $("#msgDiv").html($("#msgDiv").html() + "<p>" + returnData + "</p>");
             },
        error: function(returnData){
               console.log(returnData);
               }
    }); //end .ajax call
    } //end ajaxUpload function
}); //end onDocument ready
</script>
<style>

</style>
</head>
<body>
<form action="multiFileUploadAction.cfm" Method="POST" enctype="multipart/form-data" class="well" id="multiFileFrm">
 <input type="file" name="multiFile" id="multiFile" multiple />
 <button class="btn btn-primary" id="submitFrm" >Submit</button>
 <cfoutput>
     <input type="hidden" Name="contractID" id="contractID" value="#URL.contractID#">  
 </cfoutput>
</form>
<div id="msgDiv" style="display:none;"></div>
</body>
</html>

这是我的处理页面...再次精简到最低限度： multiFileUploadAction.cfm

<CFOUTPUT>
<CFTRY>
<cffile action="upload" 
            filefield="file-0" 
            destination="#expandpath("\images")#" 
            nameConflict="makeUnique">
    <cfcatch>
    #cfcatch.Message#
</cfcatch>
</cftry>
    <cfcontent reset="true" />Uploaded #cffile.serverFile#
</CFOUTPUT>
<!---
<cfdump var="#form#">
--->

就是这样...在我的生产代码中，我创建了一个 JSON 响应，其中包括保存的文件名和文件路径（因为“makeUnique”可能与发送的不同）我还将文件处理为创建一个缩略图并将其名称和路径发送回调用页面。这样在调用页面上我可以显示缩略图。希望有人觉得这很有帮助。

【问题讨论】：

这更像是一个问答网站。我什至不确定我是否在您的帖子中看到question。
我从来没有需要尝试过，但是这个帖子的第二段没有得到adobe文档的支持help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/…
为了防止被关闭，也许改写为问题，然后将上述内容作为答案发布。这是很好的信息，如果学究们结束这个话题，更强调遵守规则而不是尊重有用的内容，那将是一种耻辱。
虽然这些信息在博客上比在 Stackoverflow 上发布更好，但对于 Coldfusion 开发人员来说仍然是非常好的信息！
好东西！感谢分享。

标签： jquery ajax coldfusion cffile

【解决方案1】：

这是我对另一个用户遇到的类似问题的解决方案，我解决了仍然使用 HTML5“multiple”属性进行文件上传。您仍然可以像往常一样上传表单，这会将多个文件发布到服务器。无需使用 CF 的文件上传实用程序，您可以简单地循环表单数据并自己进行个人写入，从而在单个请求中对文件详细信息进行完全的服务器端控制。

ColdFusion handling of HTML5 <input type="file" multiple="multiple" />

【讨论】：

【解决方案2】：

如果您有能力一次为您的帖子发送多个字符串，我对您的建议是将它们作为 dataUrl 发布。您实际上根本不需要表单来将图像作为数据字符串发布。我最近在一个项目上工作，我不得不使用 angularjs 来创建文件上传。如果您甚至不必使用表格。您可以将其作为 dataURL 数组发送并在您的 cfc 中循环访问它们。或者，如果向后兼容性存在问题，您可以使用 jquery uploadify 之类的库或类似的库。如果您对如何通过 DataURL 设置循环并保存它们感兴趣，因为它们是图像，我将发布代码。

【讨论】：