不是真正的问题......只是想在某处发布,因为我无法在其他地方找到它。现在我已经拼凑了一个工作演示,我想我会分享。这在Coldfusion和Railo CFML服务器上同样有效。
问题在于CFML开发人员认为CFFILE不能与<input type="file" multiple>
一起使用...传统上如果你想上传3个文件并在后端使用CFFILE,则必须包含3个单独的文件输入在你的呼叫页面上。
为简单起见,这是我的解决方案。它使用Jquery $ .ajax对CFFILE进行多次调用,并将结果返回给调用页面上的div。我确定有更好的方法来做到这一点,我的代码可能是一个完整的黑客,但下面的例子工作。希望这有助于某人。
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'它可能与发送的内容不同)我还处理文件到创建缩略图并将其名称和路径发送回调用页面。那样在调用页面上我可以显示一个缩略图。希望有人觉得这很有帮助。
答案 0 :(得分:1)
这是我对另一个用户遇到的类似问题的解决方案,我仍然使用HTML5“多个”属性来解决文件上传问题。您仍然可以像往常一样上传表单,这会将多个文件POST到服务器。您可以简单地循环表单数据并自行执行单独的写入,而不是使用CF的文件上载实用程序,从而在单个请求中为您提供对文件详细信息的完全服务器端控制。
ColdFusion handling of HTML5 <input type="file" multiple="multiple" />
答案 1 :(得分:0)
如果您有能力一次为帖子发送多个字符串,我建议您将其作为dataUrl发布。实际上,您根本不需要表单来将图像作为数据字符串发布。我最近在一个项目上工作,我必须使用angularjs来创建文件上传。如果你甚至不必使用表格。您可以将其作为dataURL数组发送,并在cfc中循环显示。或者,如果向后兼容性是一个问题,您可以使用像jquery uploadify之类的库或类似的东西。如果您对如何通过DataURL设置循环并保存它们感兴趣,因为它们是图像,我将发布代码。