वास्तव में कोई सवाल नहीं है ... बस इसे कहीं पोस्ट करना चाहता था क्योंकि मुझे इसे कहीं और नहीं मिला। अब जब मैंने एक कामकाजी डेमो को एक साथ जोड़ दिया है तो मैंने सोचा कि मैं साझा करूंगा। यह कोल्डफ्यूजन और रेलो सीएफएमएल सर्वर पर समान रूप से अच्छी तरह से काम करता है।jquery और coldfusion cffile के साथ कई फाइलें अपलोड करें
समस्या यह है कि CFML डेवलपर्स के लिए यह है कि CFFILE <input type="file" multiple>
के साथ काम नहीं करता है ... पारंपरिक रूप से यदि आप 3 फाइलें अपलोड करना चाहते हैं और बैक एंड पर CFFILE का उपयोग करना चाहते हैं तो आपको अपने कॉलिंग पर 3 अलग-अलग फ़ाइल इनपुट शामिल करना होगा पृष्ठ।
यहां मेरा समाधान सादगी के लिए मुंडा हो गया है। यह CFFILE को कई कॉल करने के लिए Jquery $ .ajax का उपयोग करता है और परिणाम पृष्ठ पर एक div पर देता है। मुझे यकीन है कि ऐसा करने का एक बेहतर तरीका है और मेरा कोड शायद एक पूर्ण हैक है लेकिन नीचे दिया गया उदाहरण काम करता है। उम्मीद है कि यह किसी की मदद करता है। 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 यह ... मेरी उत्पादन कोड में मैं एक JSON प्रतिक्रिया है कि शामिल हैं बनाने के लिए:
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>
यह मेरा प्रसंस्करण पेज ... फिर न्यूनतम करने के लिए नीचे छीन लिया है फाइल के लिए सहेजी गई फ़ाइल का नाम और पथ ('मेक्यूनिक' की वजह से यह अलग हो सकता है तो क्या भेजा गया था) मैं थंबनेल बनाने के लिए फ़ाइल को संसाधित करता हूं और कॉलिंग पेज पर उसका नाम और पथ भेजता हूं। कॉलिंग पेज पर इस तरह मैं एक थंबनेल प्रदर्शित कर सकता हूं। आशा है कि किसी को यह सहायक लगेगा।
यह एक प्रश्नोत्तर साइट है। मुझे यह भी यकीन नहीं है कि अगर मैं आपकी पोस्ट में कहीं भी [प्रश्न] (http://stackoverflow.com/help/on-topic) देखता हूं। –
मुझे इसे आजमाने की आवश्यकता नहीं है, लेकिन इस पोस्ट का दूसरा अनुच्छेद एडोब दस्तावेज द्वारा समर्थित नहीं है http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSc3ff6d0ea77859461172e0811cbec22c24-7388.html –
बंद होने से रोकें, शायद एक प्रश्न के रूप में पुन: कार्य करें, और फिर ऊपर उत्तर के रूप में पोस्ट करें। यह अच्छी जानकारी है, और उपयोगी सामग्री के संबंध में निम्नलिखित नियमों पर अधिक जोर देकर, बच्चों को विषय बंद करने के लिए शर्म की बात होगी। –