上传多个文件使用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不与工作＆LT;输入类型=文件多＆GT; ......传统上，如果你想上传3个文件，并使用CFFILE在后端，你必须包括在您的电话第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的$就来多次调用CFFILE并将结果返回给调用页面上一个div。我敢肯定有一个更好的方式来做到这一点，我的code可能是一个完整的技巧，但下面的例子工程。希望这可以帮助别人。
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#">
--->
完蛋了......在我的生产codeI创建一个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.
推荐答案
下面是我解决了类似的问题，其他用户有，而我决定仍然使用HTML5的多属性的文件上传。您还可以上传表单像往常一样，这将POST multople文件到服务器。而不是使用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 multople 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.
<一个href="http://stackoverflow.com/questions/7338530/coldfusion-handling-of-html5-input-type-file-multiple-multiple/25856146#25856146">ColdFusion处理HTML5＆LT的;输入类型=＆QUOT;文件＆QUOT;多=＆QUOT;多＆QUOT; /＆GT;
这篇关于上传多个文件使用jQuery和ColdFusion CFFILE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
