🥓 🤣 ✍🏼 Caché सर्वर पर पृष्ठभूमि फ़ाइल अपलोड को लागू करना 👴🏻 🥉 🚅

कैच और एनसेंबल के वेब एप्लिकेशन डेवलपर्स में अक्सर ब्राउज़र से फाइल अपलोड करने का "फाइल अपलोड" कार्य होता है। हाल ही में SQL.ru पर Caché फोरम पर, बैकग्राउंड फ़ाइल डाउनलोड करने के तरीके के बारे में कई सवाल फिर से उठे। मैंने यह वर्णन करने का निर्णय लिया कि CSP और ZEN प्रौद्योगिकियों का उपयोग करके यह कैसे किया जा सकता है।

इस कार्य को लागू करने के लिए तैयार उपलब्ध घटकों के लिए बहुत सारे विकल्प हैं। वे सभी कार्यक्षमता की उपलब्ध चौड़ाई में भिन्न हैं, साथ ही साथ ब्राउज़रों और प्रौद्योगिकियों के लिए समर्थन भी। उनमें से ज्यादातर HTML /> तत्व का उपयोग करते हैं। वे हैं जिनमें फ्लैश का उपयोग करके डाउनलोड होता है। HTML5 ब्राउज़र से FileAPI के लिए समर्थन की शुरुआत के साथ, इस तकनीक के लिए समर्थन के साथ तैयार जावास्क्रिप्ट घटकों को खोजना संभव हो गया।

उदाहरण को लागू करने के लिए, हमने सर्वर पर फ़ाइलों को अपलोड करने के लिए इंटरनेट पर पाई जाने वाली तैयार लिपियों में से एक का चयन किया - फ़ाइनअपलोडर । दृश्य डिजाइन के लिए, बूटस्ट्रैप ढांचे को चुना गया था। मेरे द्वारा चुने गए घटक में, कई ड्रैग-एन-ड्रॉप फ़ाइलों को डाउनलोड करने के लिए समर्थन है, लेकिन फाइलएपीआई के लिए कोई समर्थन नहीं है। एकाधिक फ़ाइलों को डाउनलोड करते समय, प्रगति को प्रदर्शित किया जाता है, प्रत्येक डाउनलोड की गई फ़ाइल के लिए स्थिति प्रदर्शित होती है।
हमारे CSP एप्लिकेशन के फ़ोल्डर के रूट में फाइनपॉडर और बूटस्ट्रैप डाउनलोड करें। उदाहरण के लिए, USER , डिफ़ॉल्ट CSP एप्लिकेशन /csp/user , Caché स्थापित करते समय, डिफ़ॉल्ट पथ C:\InterSystems\Cache\CSP\user ।

सीएसपी पर एक उदाहरण कार्यान्वयन।

वर्ग habr.CSPFileUpload% CSP.Page बढ़ाता है
{

ClassMethod OnPage () % स्थिति के रूप में
{
#; फ़ाइल को स्थानांतरित कर दिया गया था, इसलिए हम ब्राउज़र को जवाब देंगे कि फ़ाइल क्या और कैसे मिली
अगर $ d ( % request । डेटा ( "लोडफ़ाइल" )) {
अगर $ lv ( % loadFileSuccess ), $ lg ( % loadFileSuccess , 1) {
#; फ़ाइल सफलतापूर्वक प्राप्त हुई थी, हम सफल रिसेप्शन के बारे में जवाब देंगे और फ़ाइल का नाम और आकार भेजेंगे
डब्ल्यू "{" सफलता "": सच, ""
"" "फ़ाइलनाम" ":" " _ $ lg ( % loadFileSuccess , 2) _ " "" "," ,
"" "फ़ाइल करें" ":" " _ $ lg ( % loadFileSuccess , 3) _ " _ "" ""
} {
#; फ़ाइल प्राप्त करते समय एक त्रुटि हुई
डब्ल्यू "{" त्रुटि "": "" त्रुटि लोड फ़ाइल ""} "
}
q $ $ $ ओके
}
#; फ़ाइलों को भेजने के लिए HTML फॉर्म
& html << ! DOCTYPE HTML>
< html >
<! - फाइन अपलोडर की शैली को कनेक्ट करें ->
< लिंक href = "fileuploader.css" rel = "स्टाइलशीट" प्रकार = "टेक्स्ट / सीएसएस" >
<! - बूटस्ट्रैप शैलियों, दृश्य डिजाइन के लिए ->
< लिंक href = "बूटस्ट्रैप / css / bootstrap.min.css" rel = "स्टाइलशीट" प्रकार = "टेक्स्ट / सीएसएस" >
< लिंक href = "बूटस्ट्रैप / css / बूटस्ट्रैप-उत्तरदायी. min.css " rel = "स्टाइलशीट" प्रकार = "टेक्स्ट / सीएसएस" >
< शरीर >
<! - यह फ़ाइल के लिए फ़ील्ड होगा ->
< div id = "थंबनेल-ठीक-अपलोडर" शैली = 'चौड़ाई: 400px' > </ div >

<! - jQuery ->
< script type = "text / javascript" src = "jquery.js" > </ script >
<! - फाइन अपलोडर स्क्रिप्ट ->
< script type = "text / javascript" src = "fileuploader.js" > </ script >
<! - बूटस्ट्रैप स्क्रिप्ट ->
< script type = "text / javascript" src = "bootstrap / js / bootstrap.min.js" > </ script >
< script type = "text / javascript" >
// फाइन अपलोडर चलाएं
$ (दस्तावेज़)। पहले से ही ( फ़ंक्शन ) ({
var थंबनेलअपलोडर = नया qq.FileUploader ({
तत्व: $ ( '# थंबनेल-ठीक-अपलोडर' ) [ 0 ], // हमारा तत्व
// यहां, हम फ़ाइल के डाउनलोडर पृष्ठ के पते को इंगित करेंगे, इस मामले में यह वर्तमान वर्ग है
क्रिया: '# ( .. % ClassName (1) _ ".cls" ) #'
// अतिरिक्त पैरामीटर फ़ाइल के साथ पारित किया
परम: {
लोडफाइल: १
}
// एकाधिक फ़ाइलों को डाउनलोड करने की अनुमति दें
कई: सच,
// मान्य फ़ाइल प्रकार
अनुमतियाँ: [ 'jpeg' , 'jpg' , 'gif' , 'png' ],
// फ़ाइल आकार सीमा
sizeLimit: 5120000 ,
onComplete: फ़ंक्शन (आईडी, फ़ाइल का नाम, responseJSON) {
अगर (responseJSON.success) {
// फ़ाइल सफलतापूर्वक भेजी गई, जानकारी जोड़ें
$ ( '# थंबनेल-ठीक-अपलोडर' )
.append ( '<div> <span> भरी हुई फ़ाइल:' + responseJSON.fileName + '</ a>> +
'<span> फ़ाइल का आकार:' + responseJSON.fileSize + '</ span> </ div>' );
}
}
});
});
</ script >
</ शरीर >
</ html >>
$ $ $ $ ठीक है
}

ClassMethod OnPreHTTP () % बूलियन के रूप में [ ServerOnly = 1]
{
#; फाइल ट्रांसफर हो गई
अगर $ d ( % request । डेटा ( "लोडफ़ाइल" )) {
s % loadFileSuccess = 0
#; फ़ाइल फ़ील्ड
s फ़ील्डनाम = "क़फ़िले"
#; फ़ाइल की सामग्री प्राप्त करें
मैं % अनुरोध करता हूं । IsDefinedMimeData ( फ़ील्डनाम , 1) {
s कंटेंट टाइप = % अनुरोध । माइमडाटा ( फील्डनेम , 1)। ContentType
s सामग्री = % अनुरोध । माइमडाटा ( फील्डनेम , 1)
} {
s कंटेंट टाइप = % अनुरोध । ContentType
s सामग्री = % अनुरोध । सामग्री
}
s : FieldName '= "" fileName = $ g ( % अनुरोध । डेटा ( फ़ील्डनाम , 1))
#; यदि फ़ाइल प्राप्त होती है, और यह शून्य आकार की नहीं है, तो हम इस पर जानकारी एकत्र करेंगे
मैं $ isobject ( सामग्री ), सामग्री । साइज़ > 0 s % loadFileSuccess = $ lb (1, $ g ( फ़ाइलनाम ), सामग्री आकार ) ।
क्ष १
}
क्ष १
}

}

नीचे ZEN तकनीक का उपयोग कर एक उदाहरण दिया गया है। उदाहरण में, फ़ाइल अपलोड फ़ॉर्म प्रदर्शित करने और सर्वर पर फ़ाइल अपलोड करने और स्थिति वापस करने के लिए केवल एक पृष्ठ का उपयोग किया जाता है।

ज़ेन का उदाहरण

/// पेज टेम्प्लेट का उपयोग करके बनाया गया: डिफ़ॉल्ट
वर्ग habr.ZENFileUpload% ZEN.Component.page का विस्तार करता है
{

/// नए आवेदन के लिए प्रदर्शन नाम।
पैरामीटर PAGENAME = "टेस्ट फाइलअप लोडर" ;

/// शैलियाँ
STRING के रूप में पैरामीटर CSSINCLUDES = "fileuploader.css, bootstrap / css / bootstrap.min.css, bootstrap / css / bootstrap-responsive.min.css" ;

/// जेएस फाइलें
पैरामीटर JSINCLUDES STRING = "jquery.js, fileuploader.js, बूटस्ट्रैप / js / bootstrap.min.js" के रूप में ;

/// यह XML ब्लॉक इस पेज की सामग्री का वर्णन करता है।
XData सामग्री [ XMLNamespace = " www.intersystems.com/zen" ]
{
< पेज xmlns = " www.intersystems.com/zen" शीर्षक = "" >
<! - फ़ाइल अपलोड फ़ील्ड प्रदर्शित करने के लिए ब्लॉक ->
< pane id = "थंबनेल-ठीक-अपलोडर" चौड़ाई = "400px" />
</ पृष्ठ >
}

/// पेज लोड करने के बाद कंपोनेंट को रन करें
ClientMethod onloadHandler () [ भाषा = जावास्क्रिप्ट]
{
var थंबनेलअपलोडर = नया qq.FileUploader ({
तत्व: $ ( '# थंबनेल-ठीक-अपलोडर' ) [ 0 ], // हमारा तत्व
// यहां, हम फ़ाइल के डाउनलोडर पृष्ठ के पते को इंगित करेंगे, इस मामले में यह वर्तमान वर्ग है
कार्रवाई: '?' ।
// अतिरिक्त पैरामीटर फ़ाइल के साथ पारित किया
परम: {
लोडफाइल: १
}
// एकाधिक फ़ाइलों को डाउनलोड करने की अनुमति दें
कई: सच,
// मान्य फ़ाइल प्रकार
अनुमतियाँ: [ 'jpeg' , 'jpg' , 'gif' , 'png' ],
// फ़ाइल आकार सीमा
sizeLimit: 5120000 ,
onComplete: फ़ंक्शन (आईडी, फ़ाइल का नाम, responseJSON) {
अगर (responseJSON.success) {
// फ़ाइल सफलतापूर्वक भेजी गई, जानकारी जोड़ें
$ ( '# थंबनेल-ठीक-अपलोडर' )
.append ( '<div> <span> भरी हुई फ़ाइल:' + responseJSON.fileName + '</ a>> +
'<span> फ़ाइल का आकार:' + responseJSON.fileSize + '</ span> </ div>' );
}
}
});
}

/// ज़ेन पृष्ठ एक HTTP अनुरोध की अधिसूचना। इस विधि को अधिलेखित किया जा सकता है
/// उपवर्गों द्वारा। <br/>
/// इसे </ em> </ em> मानक ज़ेन प्री-HTTP प्रोसेसिंग होने से पहले कहा जाता है।
ClassMethod % OnPreHTTP () % Boolean के रूप में [ ServerOnly = 1]
{
#; फाइल ट्रांसफर हो गई
अगर $ d ( % request । डेटा ( "लोडफ़ाइल" )) {
s % loadFileSuccess = 0
#; फ़ाइल फ़ील्ड
s फ़ील्डनाम = "क़फ़िले"
#; फ़ाइल की सामग्री प्राप्त करें
मैं % अनुरोध करता हूं । IsDefinedMimeData ( फ़ील्डनाम , 1) {
s कंटेंट टाइप = % अनुरोध । माइमडाटा ( फील्डनेम , 1)। ContentType
s सामग्री = % अनुरोध । माइमडाटा ( फील्डनेम , 1)
} {
s कंटेंट टाइप = % अनुरोध । ContentType
s सामग्री = % अनुरोध । सामग्री
}
s : FieldName '= "" fileName = $ g ( % अनुरोध । डेटा ( फ़ील्डनाम , 1))
#; यदि फ़ाइल प्राप्त होती है, और यह शून्य आकार की नहीं है, तो हम इस पर जानकारी एकत्र करेंगे
मैं $ isobject ( सामग्री ), सामग्री । साइज़ > 0 s % loadFileSuccess = $ lb (1, $ g ( फ़ाइलनाम ), सामग्री आकार ) ।
क्ष १
}
क्ष १
}

/// फ़ाइल डाउनलोड को प्रोसेस करने के लिए, पेज बनाने की विधि को फिर से परिभाषित करें
विधि % DrawHTMLPage ()
{
#; यदि सर्वर पर कोई फ़ाइल अपलोड होती है, तो हम JSON प्रारूप में डाउनलोड स्थिति को वापस कर देंगे
अगर $ d ( % request । डेटा ( "लोडफ़ाइल" )) {
अगर $ lv ( % loadFileSuccess ), $ lg ( % loadFileSuccess , 1) {
#; फ़ाइल सफलतापूर्वक प्राप्त हुई थी, हम सफल रिसेप्शन के बारे में जवाब देंगे और फ़ाइल का नाम और आकार भेजेंगे
डब्ल्यू "{" सफलता "": सच, ""
"" "फ़ाइलनाम" ":" " _ $ lg ( % loadFileSuccess , 2) _ " "" "," ,
"" "फ़ाइल करें" ":" " _ $ lg ( % loadFileSuccess , 3) _ " _ "" ""
} {
#; फ़ाइल प्राप्त करते समय एक त्रुटि हुई
डब्ल्यू "{" त्रुटि "": "" त्रुटि लोड फ़ाइल ""} "
}
क्ष
}
#; अन्यथा, डिफ़ॉल्ट पृष्ठ ड्रा करें।
d ## सुपर ()
}

/// पृष्ठ के अंत में पृष्ठ के निर्माण समय को अक्षम करें
BOOLEAN = 0 के रूप में पैरामीटर शोस्टैट ;

}

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

Caché सर्वर पर पृष्ठभूमि फ़ाइल अपलोड को लागू करना

More articles: