2013-08-02 7 views
5

मैं नहीं पूछ रहा हूं कि फ़ाइल कैसे अपलोड करें।एचटीएमएल फ़ाइल इनपुट कैसे काम करता है?

मैं बस सोच रहा हूं कि, जब आप एक HTML फ़ाइल तत्व पर क्लिक करते हैं, तो यह स्थानीय सिस्टम फ़ोल्डर्स दिखाता है।

क्या हम बटन और इनपुट जैसे किसी भी अन्य HTML तत्वों के साथ ऐसा कर सकते हैं? यदि नहीं, फाइलों के बारे में इतना खास क्या है? यह सिस्टम निर्देशिका कैसे दिखाता है?

+4

यह ब्राउज़र से कोई लेना देना HTML के साथ नहीं है। शुद्ध HTML (और जावास्क्रिप्ट) के साथ आप जो कुछ भी नहीं करते हैं, वह आपको किसी ग्राहक की फ़ाइल सिस्टम तक सीधे पहुंच प्रदान करेगा। ऐसा करने के लिए आपको फ़्लैश या ActiveX जैसे कुछ तृतीय पक्ष सॉफ़्टवेयर की आवश्यकता होगी। सर्वर व्यूपॉइंट से, जब आप कोई फ़ाइल अपलोड करते हैं, तो आप इसमें एक ऑक्टेट स्ट्रीम के साथ एक HTTP अनुरोध कर रहे हैं। – Renan

+0

धन्यवाद। लेकिन सवाल बनी हुई है। यदि यह ब्राउज़र के साथ है और HTML के साथ नहीं है तो केवल फाइल ही ऐसा कर सकती है? – zod

+0

@zod इसी कारण ब्राउज़र स्वचालित रूप से आपके पृष्ठ पर आपके HTML तत्वों पर अपनी स्टाइल लागू करते हैं - इस प्रकार ब्राउज़र 'फ़ाइल' के प्रकार विशेषता के साथ प्रस्तुत करता है और इनपुट करता है। आईई: आप ••••• के रूप में टेक्स्ट शो नहीं बना सकते हैं जब तक कि आप पासवर्ड फ़ील्ड का उपयोग नहीं करते हैं, (या जावास्क्रिप्ट और वर्णों को प्रतिस्थापित करें, लेकिन यह वही बात नहीं है।) – Jacques

उत्तर

0

एकमात्र HTML तत्व जो आपको फाइल सिस्टम तक पहुंच प्रदान कर सकता है वह input (प्रकार फ़ाइल का) है, क्योंकि ब्राउज़र इसे एक खुला संवाद दिखाने की अनुमति देता है, केवल ब्राउज़र ही ऐसा कर सकता है, किसी भी स्क्रिप्ट API में कोई रास्ता नहीं है सिस्टम निर्देशिकाओं तक पहुंचने के लिए। सुरक्षा कारणों से फाइल सिस्टम को इस तरह से एक्सेस करने का कोई अन्य तरीका नहीं है (एक संवाद के माध्यम से); एचटीएमएल 5 के माध्यम से स्थानीय रूप से डेटा को सहेजना, एक डाउनलोड सेव करें संवाद को मजबूर करना, या एक प्रिंट संवाद फिर से ब्राउज़र नियंत्रित क्रियाएं हैं, लेकिन आप उन्हें किसी वेबपृष्ठ से आवेदक कर सकते हैं।

2

नोटिस: मैं फ़ाइल इनपुट के साथ ब्राउज़र प्रक्रिया को बिल्कुल सही तरीके से वर्णन नहीं कर रहा हूं, लेकिन मैं चरण-दर-चरण सूचीबद्ध करता हूं जो मैंने किया है और इसका परिणाम इनपुट को बेहतर समझने के लिए है; यद्यपि यह इसके अंदरूनी तंत्र को समझने में मदद नहीं कर सकता है, लेकिन इससे आपको काम करने के दौरान डरने या भ्रमित होने में मदद मिलेगी। मेरे प्रयोगों में, मैं एचटीएमएल, अपाचे + PHP का उपयोग केकपीएचपी, फ़ायरफ़ॉक्स और क्रोम के साथ वास्तविक दुनिया प्रोग्रामिंग में कैसे किया जाता है इसकी तुलना करने के लिए करूंगा। आइए शुरू करें :)

  1. अपलोड फ़ाइल का चयन करते समय स्मृति लोड इनपुट फ़ाइल या नहीं?
    • नहीं, यह सिर्फ फ़ाइल पथ को सहेजता है। मैं प्रक्रिया मॉनीटर का उपयोग करता हूं और फिर लगभग 200 एमबी फ़ाइल का चयन करता हूं, क्रोम और फ़ायरफ़ॉक्स दोनों अधिक मेमोरी नहीं खाते हैं, या डिस्क पढ़ते हैं; सबमिट बटन पर क्लिक करने से पहले मैं इस फ़ाइल को भी हटा सकता हूं।
  2. इनपुट के लिए फॉर्म प्रभाव का enctype कैसे?
    • application/x-www-form-urlencoded और text/plain आईजीएनओआर फ़ाइल इनपुट प्रतीत होता है; केवल multipart/form-data फ़ाइल को फ़ाइल पथ से फ़ाइल पढ़ने और उसे भेजने के लिए ब्राउज़र को ट्रिगर करें। (यह देखने के लिए कि एनटीपीपी कार्य यहां कैसे संदर्भित करता है: What does enctype='multipart/form-data' mean?)
  3. डेटा प्राप्त करते समय सर्वर पक्ष क्या करता है?
    • जैसा कि ऊपर कहा, मैं केवल पीएचपी के बारे में परवाह है, और क्या पीएचपी हमें देने है:
// Upload 1 file Array (
    [<input name in file input tag>] => Array 
     (
      [name] => <same as the name of selected to upload file> 
      [type] => <type> 
      [tmp_name] => <path of file in tmp folder will explain below> 
      [error] => <0: error, maybe because of file size too large, 1: success> 
      [size] => <size of file in bytes> 
     )  
) 
// Upload multiple files (input name must be <someName>[]) 
Array 
(
    [<input name in file input tag>] => Array 
     (
      [name] => [<array of name>] 
      [type] => [<array of type>] 
      [tmp_name] => [<array of tmp path>] 
      [error] => [<array of error>] 
      [size] => [<array of size>] 
     ) 

) 

ब्राउज़र अपाचे के लिए अनुरोध (फ़ाइल) भेजते हैं, अपाचे ने PHP को अनुरोध अग्रेषित किया; PHP अनुरोध से फ़ाइल निकालें और tmp फ़ोल्डर पर फ़ाइल में सहेजें जिसे हम [tmp_name] में देख सकते हैं। PHP फ़ाइल के अंत में, यह अस्थायी को हटा देता है, इसलिए फ़ाइल को सहेजने की आवश्यकता होने पर हमें स्क्रिप्ट समाप्त होने से पहले move_uploaded_file का उपयोग करना होगा।

  1. केकपीएचपी अपलोड की गई फाइल के साथ कैसे करता है?
    • यह वही है के रूप में क्या पीएचपी बस इसे में डाल दिया है $ this-> अनुरोध और हम यह सुनिश्चित करना चाहिए कि उनके नाम होना चाहिए कि डेटा [] या बस सिर्फ $ this-> फार्म> प्रपत्र ("")
    • का उपयोग
  2. क्या मैं छवि का पूर्वावलोकन कर सकता हूं या सर्वर पर सबमिट करने से पहले चयनित फ़ाइल के साथ कुछ कर सकता हूं?
    • हां। आप फ़ाइल इनपुट के onchange ईवेंट पर सुन सकते हैं; इसके माध्यम से, हम फ़ाइललिस्ट तक पहुंच सकते हैं, इसके बाद से हम फ़ाइल में पहुंच सकते हैं; FileReader (लगभग वर्तमान ब्राउज़रों में समर्थन) के साथ हम डेटा यूआरएल के रूप में यह पढ़ सकते हैं ... (मई यहाँ विस्तार देखें: how to preview a image before and after upload?)
संबंधित मुद्दे