使用 jquery 和 Coldfusion cffile 上传多个文件 [英] Upload multiple files with jquery and coldfusion cffile
问题描述
不是一个真正的问题...只是想在某个地方发布这个，因为我在其他地方找不到它.现在我已经拼凑了一个我认为我会分享的工作演示.这同样适用于 Coldfusion 和 Railo CFML 服务器.
Not really a question... Just wanted to post this somewhere because I couldnt find it elsewhere. Now that I've cobbled together a working demo I thought i would share. This works equally well on Coldfusion and Railo CFML servers.
对于 CFML 开发人员来说，问题在于 CFFILE 不适用于 <input type="file" multiple> ...传统上，如果您想上传 3 个文件并在在后端，您必须在调用页面上包含 3 个单独的文件输入.
The problem is that for CFML developers is that CFFILE doesn't work with <input type="file" multiple> ... traditionally if you wanted to upload 3 files and use CFFILE on the back end you would have to include 3 separate file inputs on your calling page.
为了简单起见，这是我的解决方案.它使用 Jquery $.ajax 对 CFFILE 进行多次调用，并将结果返回到调用页面上的 div.我确信有更好的方法可以做到这一点，我的代码可能是一个完整的 hack，但下面的示例有效.希望这可以帮助某人.
Here is my solution shaved down for simplicity. It uses Jquery $.ajax to make several calls to CFFILE and returns the results to a div on the calling page. Im sure there is a better way to do this and my code is probably a complete hack but the below example works. Hope this helps someone.
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
This is my proccessing page... again stripped down to the bare minimum: 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"可能与发送的不同)我还将文件处理为创建一个缩略图并将其名称和路径发送回调用页面.这样在调用页面上我可以显示缩略图.希望有人觉得这很有帮助.
Thats it... in my production code i create a JSON response that includes the saved file name and path to the file (because of the 'makeUnique' it could be different then what was sent) I also process the file to create a thumbnail and send it's name and path back to the calling page. That way on the calling page I can display a thumbnail. Hope someone finds this helpful.
推荐答案
这是我对另一个用户遇到的类似问题的解决方案，我解决了仍然使用 HTML5multiple"属性进行文件上传.您仍然可以像往常一样上传表单，这会将多个文件发布到服务器.无需使用 CF 的文件上传实用程序，您可以简单地循环表单数据并自己进行个人写入，让您在单个请求中对文件详细信息进行完全的服务器端控制.
Here's my solution to a similar issue another user had, which I resolved still utilizing the HTML5 "multiple" attribute for file uploads. You can still upload the form as you normally would, which would POST multiple files to the server. Rather than using CF's file upload utilities, you can simply loop over the form data and do the individual writes yourself, giving you full server-side control of the file details in a single request.
这篇关于使用 jquery 和 Coldfusion cffile 上传多个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
