Không thực sự là một câu hỏi ... Chỉ muốn đăng bài này ở đâu đó vì tôi không thể tìm thấy nó ở nơi khác. Bây giờ tôi đã trộn lẫn với nhau một bản demo làm việc tôi nghĩ rằng tôi sẽ chia sẻ. Điều này hoạt động tốt trên các máy chủ Coldfusion và Railo CFML.Tải lên nhiều tệp với jquery và coldfusion cffile
Vấn đề là đối với nhà phát triển CFML là CFFILE không hoạt động với <input type="file" multiple> ... theo truyền thống nếu bạn muốn tải lên 3 tệp và sử dụng CFFILE ở mặt sau, bạn sẽ phải bao gồm 3 đầu vào tệp riêng biệt trang.
Đây là giải pháp của tôi được rút gọn để đơn giản. Nó sử dụng Jquery $ .ajax để thực hiện một số cuộc gọi tới CFFILE và trả về kết quả cho một div trên trang gọi. Im chắc chắn có một cách tốt hơn để làm điều này và mã của tôi có lẽ là một hack hoàn chỉnh nhưng ví dụ dưới đây hoạt động. Hy vọng điều này sẽ giúp một ai đó.
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>
Đây là trang proccessing tôi ... một lần nữa tước xuống đến mức tối thiểu: 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#">
--->
Thats nó ... trong mã sản xuất của tôi tạo ra một phản ứng JSON trong đó bao gồm tên tệp và đường dẫn tới tệp (vì 'makeUnique' nó có thể khác nhau sau đó được gửi) Tôi cũng xử lý tệp để tạo hình thu nhỏ và gửi tên và đường dẫn của nó quay lại trang gọi. Bằng cách đó trên trang gọi tôi có thể hiển thị một hình thu nhỏ. Hy vọng ai đó thấy điều này hữu ích.
Đây là trang web hỏi đáp. Tôi thậm chí không chắc chắn nếu tôi thấy một [câu hỏi] (http://stackoverflow.com/help/on-topic) ở bất cứ đâu trong bài đăng của bạn. –
Tôi chưa bao giờ có nhu cầu dùng thử, nhưng đoạn thứ hai của bài đăng này không được tài liệu adobe hỗ trợ http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSc3ff6d0ea77859461172e0811cbec22c24-7388.html –
Để ngăn chặn bị đóng, có thể viết lại như một câu hỏi, và sau đó đăng bài ở trên làm câu trả lời. Đó là thông tin tốt, và nó sẽ là một sự xấu hổ cho người đi bộ để đóng chủ đề, nhấn mạnh hơn vào các quy tắc sau đây hơn là tôn trọng nội dung hữu ích. –