2013-10-02 9 views
8

वास्तव में कोई सवाल नहीं है ... बस इसे कहीं पोस्ट करना चाहता था क्योंकि मुझे इसे कहीं और नहीं मिला। अब जब मैंने एक कामकाजी डेमो को एक साथ जोड़ दिया है तो मैंने सोचा कि मैं साझा करूंगा। यह कोल्डफ्यूजन और रेलो सीएफएमएल सर्वर पर समान रूप से अच्छी तरह से काम करता है।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> 

यह मेरा प्रसंस्करण पेज ... फिर न्यूनतम करने के लिए नीचे छीन लिया है फाइल के लिए सहेजी गई फ़ाइल का नाम और पथ ('मेक्यूनिक' की वजह से यह अलग हो सकता है तो क्या भेजा गया था) मैं थंबनेल बनाने के लिए फ़ाइल को संसाधित करता हूं और कॉलिंग पेज पर उसका नाम और पथ भेजता हूं। कॉलिंग पेज पर इस तरह मैं एक थंबनेल प्रदर्शित कर सकता हूं। आशा है कि किसी को यह सहायक लगेगा।

+0

यह एक प्रश्नोत्तर साइट है। मुझे यह भी यकीन नहीं है कि अगर मैं आपकी पोस्ट में कहीं भी [प्रश्न] (http://stackoverflow.com/help/on-topic) देखता हूं। –

+3

मुझे इसे आजमाने की आवश्यकता नहीं है, लेकिन इस पोस्ट का दूसरा अनुच्छेद एडोब दस्तावेज द्वारा समर्थित नहीं है http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSc3ff6d0ea77859461172e0811cbec22c24-7388.html –

+1

बंद होने से रोकें, शायद एक प्रश्न के रूप में पुन: कार्य करें, और फिर ऊपर उत्तर के रूप में पोस्ट करें। यह अच्छी जानकारी है, और उपयोगी सामग्री के संबंध में निम्नलिखित नियमों पर अधिक जोर देकर, बच्चों को विषय बंद करने के लिए शर्म की बात होगी। –

उत्तर

0

यहां एक अन्य उपयोगकर्ता के समान समस्या का मेरा समाधान है, जिसे मैंने अभी भी फ़ाइल अपलोड के लिए HTML5 "एकाधिक" विशेषता का उपयोग करने का संकल्प किया है। आप अभी भी फॉर्म को अपलोड कर सकते हैं जैसा कि आप सामान्य रूप से करेंगे, जो सर्वर पर बहुस्तरीय फ़ाइलों को पोस्ट करेगा। सीएफ की फ़ाइल अपलोड यूटिलिटीज का उपयोग करने के बजाय, आप फॉर्म डेटा पर बस लूप कर सकते हैं और व्यक्ति स्वयं को लिखता है, जिससे आप एक ही अनुरोध में फ़ाइल विवरण का पूर्ण सर्वर-साइड नियंत्रण दे सकते हैं।

ColdFusion handling of HTML5 <input type="file" multiple="multiple" />

0

मेरा सुझाव आपको डेटा यूआरएल के रूप में पोस्ट करना होगा यदि आपके पास आपकी पोस्ट के लिए एक समय में कई स्ट्रिंग्स भेजने की क्षमता है। डेटा स्ट्रिंग्स के रूप में छवियों को पोस्ट करने के लिए आपको वास्तव में एक फॉर्म की आवश्यकता नहीं है। मैंने हाल ही में एक परियोजना पर काम किया जहां मुझे फ़ाइल अपलोड बनाने के लिए कोणीय का उपयोग करना पड़ा। यदि आपको किसी फॉर्म का उपयोग भी नहीं करना है। आप इसे अपने सीएफसी में डेटारल्स और लूप के माध्यम से भेज सकते हैं। वैकल्पिक रूप से आप jquery uploadify जैसे लाइब्रेरी का उपयोग कर सकते हैं या पिछड़ा संगतता एक समस्या होने पर ऐसा कुछ कर सकते हैं। यदि आप रुचि रखते हैं कि डेटाURL के माध्यम से लूपिंग कैसे सेट करें और उन्हें सहेजने के बाद से वे छवियां पोस्ट करेंगे, तो मैं कोड पोस्ट करूंगा।

संबंधित मुद्दे