使用jquery和coldfusion cffile上传多个文件

不是一个问题…只是想在某处发布,因为我无法在其他地方找到它。 现在我已经拼凑了一个工作演示,我想我会分享。 这在Coldfusion和Railo CFML服务器上同样有​​效。

问题是,对于CFML开发人员而言,CFFILE不能与 …传统上如果你想上传3个文件并在后端使用CFFILE,则必须包含3个单独的文件您的呼叫页面上的输入。

为简单起见,这是我的解决方案。 它使用Jquery $ .ajax对CFFILE进行多次调用,并将结果返回给调用页面上的div。 我确定有更好的方法来做到这一点,我的代码可能是一个完整的黑客,但下面的例子工作。 希望这有助于某人。

 multiFileUpload.cfm    Multi File Upload  $( 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() + "

" + returnData + "

"); }, error: function(returnData){ console.log(returnData); } }); //end .ajax call } //end ajaxUpload function }); //end onDocument ready

这是我的处理页面……再次被剥离到最低限度:multiFileUploadAction.cfm

     #cfcatch.Message#   Uploaded #cffile.serverFile#  <!---  ---> 

多数民众赞成…在我的生产代码中我创建了一个JSON响应,其中包含保存的文件名和文件路径(因为’makeUnique’它可能与发送的内容不同)我还处理文件以创建缩略图并将其名称和路径发送回调用页面。 在调用页面上,我可以显示缩略图。 希望有人觉得这很有帮助。

这是我对另一个用户遇到的类似问题的解决方案,我仍然使用HTML5“多个”属性来解决文件上传问题。 您仍然可以像往常一样上传表单,这会将多个文件POST到服务器。 您可以简单地循环表单数据并自行执行单独的写入,而不是使用CF的文件上载实用程序,从而在单个请求中为您提供对文件详细信息的完全服务器端控制。

ColdFusion处理HTML5

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