मानक इनपुट फ़ाइल तत्व बदलें

हाल ही में, अनुकूलन करते समय (उदाहरण के लिए, रूसी विद्वान मुझे क्षमा करेंगे), मैं इसे मानक रूप तत्वों के वेब-मोडिंग (एक बार फिर प्रिय रूसी विद्वान) भी कहूंगा, और विशेष रूप से फ़ाइल तत्व में, मैं एक बड़े उपद्रव में आया था, यह अनुकूलन के लिए अनुपयुक्त हो गया। लब्बोलुआब यह है: फ़ाइल तत्व से, हमें विशेष रूप से इसकी "फाइल अपलोड करें" डायलॉग बॉक्स की आवश्यकता है, जिसे मोज़िला और ओपेरा ब्राउज़र में प्रोग्रामेटिक रूप से निकालना असंभव है, अर्थात। कमांड डॉक्यूमेंट .getElementById ('SaveForm'); क्लिक करें (); कुछ भी नहीं लौटाएगा। डेवलपर्स का दावा है कि यह असुरक्षित है, जो बहस का मुद्दा है। लेकिन IE ने मुझे प्रसन्न किया, यह मूल रूप से फ़ाइल तत्व पर एक माउस क्लिक भेजता है, सबसे अधिक संभावना डेवलपर्स की निगरानी के कारण होती है जो आपकी सुरक्षा में "खतरनाक छेद" छोड़ देते हैं।



जैसा कि मैंने अभी चकमा नहीं दिया, कुछ भी नहीं हुआ। तीन घंटे तक चलने के बाद, मैं आदर्श समाधान की पहली गवाही में आया: फ़ाइल को एक डिव में डालें, डिव को पारदर्शी बनाएं (अपारदर्शिता: 0%), मैं इस तथ्य पर आपका ध्यान आकर्षित करता हूं कि आपको इसे पारदर्शी बनाने की आवश्यकता है लेकिन दृश्यता नहीं (दृश्यता: छिपी), अपेक्षाकृत बोलने की अपारदर्शिता : 0% तत्व को आंखों से छिपाता है, और दृश्यता: माउस से भी छिपी होती है। लेकिन यदि आप फ़ॉन्ट आकारों के साथ खेलते हैं, तो विधि अपनी अपील खोना शुरू कर देती है, अदृश्य बटन को याद करना संभव हो जाता है।

एक घंटे बाद, मैं एक और yamzbrowser उदाहरण के सामने आया (html पृष्ठ में डाली गई swf ऑब्जेक्ट से सर्वर पर फाइलें अपलोड करने की अनुमति देता है)। वह पहली विधि दोहराता है, लेकिन! एक अंतर के साथ: यह चलते समय माउस कर्सर के नीचे div को प्रतिस्थापित करता है। वैसे, मैं ओपेरा के लिए इस सटीक धन्यवाद का पता लगाने में कामयाब रहा (मैं आमतौर पर फॉक्स का उपयोग करता हूं, और यह एक बड़ा दुर्घटना है कि मैंने ओपेरा के साथ उदाहरण खोला), क्योंकि लेखक उसके लिए भी पारदर्शिता स्थापित करना भूल गया था।



दोनों विधियों का अध्ययन करने के बाद, मैंने उन्हें एक में जोड़ दिया और वेब पर व्यापक अनुप्रयोग के लिए एक समाधान विकसित किया। और इसलिए, हम वापस शुरू करते हैं।

मान्यताओं

1. फ़ाइल को बदलने वाले तत्व का आकार फ़ाइल के आकार से काफी भिन्न हो सकता है।
2. फ़ाइल तत्व फॉर्म का हिस्सा है।
3. केवल पैरानॉयड ब्राउज़र में जावास्क्रिप्ट को निष्क्रिय करता है
4. आगंतुक फ़ायरफ़ॉक्स, ओपेरा या IE का उपयोग करने वाले उपयोगकर्ताओं में से सबसे कम 99% है
5. समाधान सभी ब्राउज़रों में एक ही एल्गोरिदम पर काम करना चाहिए, अर्थात्। IE के लिए विभिन्न उपकरणों का उपयोग करने का विकल्प document.getElementById ('SaveForm') है। क्लिक करें (); और एफएफ और ओपेरा के लिए - प्रतिस्थापन स्वीकार्य नहीं है।
6. समाधान पृष्ठ पर डुप्लिकेट हो सकता है

एल्गोरिथ्म

जब आप एक प्रतिस्थापन बटन पर होवर करते हैं, तो तत्व के साथ परत कर्सर के नीचे डाली जाती है, ताकि कर्सर परत के बीच में हो, अर्थात। हम यह निश्चित रूप से जानेंगे कि उपयोगकर्ता बटन और दृश्यमान परिवर्तनों को दृश्यमान करने से नहीं चूकेगा: तत्व के साथ परत अदृश्य रहती है, लेकिन माउस के लिए सुलभ है। कर्सर को घुमाते समय, हम परत को विकल्प बटन के भीतर ले जाते हैं, बटन के किनारे पर पहुंचने पर दृश्यता छिप जाती है।

विधि

एचटीएमएल

<form>

<div id="divFile1" class="file" onmousemove="divFileMove(this.id, 'buttonFile1',event);">

<input type="file" name="UploadFile" id="file1" size="1" onchange="result(this.id, 'divResult');" tabindex="1" />

</div>

<div id="divResult"> </div>

<image src="./images/fileUploadButton.jpg" id="buttonFile1" onmouseover="divFileShow('divFile1', event);"/>

</form>

सीएसएस



div.file{

position : absolute ;

top : -1000px ;

left : -1000px ;

-moz-opacity : 0 ;

filter : alpha(opacity=0) ;

opacity : 0% ;

visibility : hidden ;

}







div.file - यह .file वर्ग है जिसका उपयोग किया गया है और आईडी नहीं, धारणा संख्या 6 को देखते हुए।

ऊपर, बाएँ: -1000px - जावास्क्रिप्ट से पहले इसे परत को छुपाता है, बस मामले में।

-मोज़-अपारदर्शिता, फ़िल्टर: अल्फा, अपारदर्शिता - क्रमशः FF, IE और ओपेरा के लिए पारदर्शिता सेट करता है।

दृश्यता: छिपी - माउस से छुपाता है।

जावास्क्रिप्ट

फ़ंक्शन divFileShow (divId, e), जहां divId फ़ाइल तत्व के साथ परत की आईडी है, ई घटना है। माउसएक्स और माउसवाई फ़ंक्शन सभी ब्राउज़रों के लिए ऊपरी बाएँ कोने के सापेक्ष माउस की स्थिति की गणना करते हैं। माउस को दिखाई देने वाली परत बनाता है और इसे कर्सर के नीचे प्रतिस्थापित करता है ताकि कर्सर परत के बीच में हो, इसलिए हम निश्चित रूप से याद नहीं करेंगे।



function divFileShow ( divId,e ){

var div = document .getElementById ( divId ) ;

div.style.left = ( mouseX ( e ) - Math . round ( div.offsetWidth / 2 )) + "px" ;

div.style.top = ( mouseY ( e ) - Math . round ( div.offsetHeight / 2 )) + "px" ;

div.style.visibility = "visible" ;

}





DivFileMove फ़ंक्शन (divId, butId, e), जहां divId परत की आईडी है, लेकिनId प्रतिस्थापन बटन (बटन के आयाम प्राप्त करने के लिए आवश्यक) की आईडी है, ई घटना है। यह ब्यूटि ऑब्जेक्ट की सीमा तक पहुँचने पर परत को माउस के पीछे ले जाता है।

function divFileMove ( divId, butId, e ){

var div = document .getElementById ( divId ) ;

var button = document .getElementById ( butId ) ;

var move = true ;

var divX = parseInt ( div.style.left ) + Math . round ( div.offsetWidth / 2 ) ;

var divY = parseInt ( div.style.top ) + Math . round ( div.offsetHeight / 2 ) ;

if ( divX < button.offsetLeft || divX > ( button.offsetLeft + button.offsetWidth )) {

move = false ;

}

if ( divY < button.offsetTop || divY > ( button.offsetTop + button.offsetHeight )){

move = false ;

}

if ( move ){

div.style.left = ( mouseX ( e ) - div.offsetWidth / 2 ) + "px" ;

div.style.top = ( mouseY ( e ) - div.offsetHeight / 2 ) + "px" ;

} else {

div.style.visibility = "hidden" ;

}

}





फंक्शन रिजल्ट (fileId, divResultId), जहां fileId फाइल एलिमेंट की आईडी है, divResultId उस लेयर की आईडी है जहां चयनित फाइल का नाम प्रदर्शित होगा। फ़ंक्शन परत के आंतरिक HTML में केवल फ़ाइल नाम से गुजरता है (उदाहरण के लिए, "मेरे सभी पासवर्ड। Txt"), और शीर्षक विशेषता में पूर्ण पथ डालता है, मेरी राय में, यह अधिक सुविधाजनक है।



function result ( fileId, divResultId ){

var divResult = document .getElementById ( divResultId ) ;

var formFile = document .getElementById ( fileId ) ;

divResult.innerHTML = formFile.value. replace ( /^([^\\\/]*(\\|\/))*/ ,"" ) ;

divResult.setAttribute ( "title",formFile.value ) ;

}





और अंत में, दो फ़ंक्शन (माउसएक्स (ई), माउसवाई (ई), जहां ई घटना है) जो IE और अन्य ब्राउज़रों के लिए पृष्ठ पर कर्सर का स्थान निर्धारित करते हैं, वे केवल दो अक्षरों में भिन्न होते हैं, इसलिए मैं उनमें से एक दूंगा।

function mouseX ( e ){

if ( e.pageX ) return e.pageX;

if ( e.clientX ) return e.clientX + document . body .scrollLeft;

}

टिप्पणी

चूंकि फ़ाइल तत्व के साथ परत बटन को ओवरलैप करती है, इसलिए घटना को इसे पास नहीं किया जाता है: होवर, इसलिए यदि आपको माउसओवर का अनुकरण करने की आवश्यकता है तो आपको बटन वर्ग को बदलकर या छवि को बदलकर स्वयं को उचित कार्यक्षमता जोड़ना होगा।

एक कार्यशील उदाहरण , यदि कोई उचित कारण से योगदान करना चाहता है, तो अपनी ऑनलाइन प्रस्तुति के लिए एक उदाहरण पोस्ट करें, मैं इस लेख में लिंक और धन्यवाद की गारंटी देता हूं।

ब्राउज़रों फ़ायरफ़ॉक्स 2, ओपेरा 9, IE 6 में परीक्षण किया गया।

आपका ध्यान देने के लिए धन्यवाद।



पीएस रिपोर्ट कैश डेस्क छोड़ने के बिना अग्रिम में कीड़े;)