छवि को वेब फ़ॉर्म में खींचें और छोड़ें

Question

हमारे पास एक वेब पेज (HTML जावास्क्रिप्ट और PHP अधिकतर) है जो उपयोगकर्ता को एक छवि अपलोड करने की अनुमति देता है। हमारे पास सामान्य ब्राउज बटन है, और यह ठीक काम करता है। हालांकि, हम छवि को टेक्स्ट फ़ील्ड में खींचने और ड्रॉप करने के लिए कार्यक्षमता जोड़ना चाहते हैं।

जीमेल आपको अपने मेल ऐप में ऐसा करने की अनुमति देता है, इसलिए यह संभव है। एकमात्र तरीका जिसे हमने ऐसा करने का सोचा है, वह एक जावा ऐपलेट बनाना है जो यह सब करता है, लेकिन यह बहुत गन्दा हो जाता है।

क्या आपने इसे किया है? यह कैसे काम करता है?

संपादित करें: मै मैक पर फ़ायरफ़ॉक्स का उपयोग कर रहा हूं। मेरे ज्यादातर उपयोगकर्ता शायद विंडोज़ पर आईई का उपयोग करेंगे।

धन्यवाद

Answer 1

मैं एक छोड़ने और छवि उनके संपादक खींच की कोशिश की है में एक फ़ाइल खींचें नहीं कर सकते। यदि फ़ाइल किसी वेब पेज पर है, तो यह पथ उठाएगी, लेकिन यदि यह आपके स्थानीय ड्राइव पर है, तो पथ "फ़ाइल: // c: ...." होगा, जो संदेश के साथ अपलोड नहीं होगा और एक टूटी हुई छवि के रूप में खत्म हो जाओ।

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

Answer 2

एक सामान्य इनपुट क्षेत्र में एक फ़ाइल गिराने इनपुट क्षेत्र में छवि के लिए स्थानीय पथ कॉपी देंगे, हालांकि यह एक < इनपुट प्रकार = 'फ़ाइल' की .Value संपत्ति के बाद से आप के लिए बेकार है सुरक्षा कारणों से > टैग केवल पढ़ने के लिए है।

आप देखेंगे कि जीमेल केवल आपको < इनपुट प्रकार = 'फ़ाइल' > इनपुट पर कोई छवि खींचने/ड्रॉप करने की अनुमति देता है और कोई अन्य फ़ील्ड नहीं।

मुझे लगता है कि आप क्या पूछना चाहते हैं "how do I style a <input type='file'> tag like google" है, जो एक अन्य विषय है।

संपादित करें: ठीक है IE में आप एक < इनपुट प्रकार = 'फ़ाइल' > टैग

Answer 3

आप इसे एक्सयूएल (इसे प्रभावी रूप से फ़ायरफ़ॉक्स-केवल समाधान बनाना) या ActiveX (एक आईई-केवल समाधान) में कर सकते हैं।

Answer 4

इस किया पाने के लिए सबसे अच्छा तरीका है के लिए https://www.photoshop.com/express

---

तस्वीर अपलोड करने वाले की तरह एक एडोब आकाशवाणी स्टैंडअलोन बनाने के लिए आप इस पोस्ट पर कुछ महान जानकारी प्राप्त कर सकते है: http://devzone.zend.com/article/3650-Desktop-Image-Uploaders-Using-Adobe-AIR-and-JavaScript

Answer 5

मैं मुझे लगता है कि नरक एफएफ 3 स्थानीय फाइल सिस्टम मुद्दों के रूप में परेशान करने के आसपास एक रास्ता है, लेकिन मुझे परीक्षण करने के लिए जावास्क्रिप्ट का एक टुकड़ा चाहिए। मैं फ़ाइल अपलोड फॉर्म से स्थानीय फ़ाइल पथ कैसे पढ़ूं? कृपया 'फ्लैश एक समाधान है' के साथ रुको। मैं व्यापार द्वारा एक फ्लैश डेवलपर हूं और मुझे नहीं लगता कि यह एक अच्छा समाधान है।

Answer 6

क्या आपको यह फ़ायरफ़ॉक्स एक्सटेंशन इंस्टॉल करने का मौका मिला है?

http://www.teslacore.it/wiki/index.php?title=DragDropUpload

मैं अगर वहाँ एक बाहरी प्लगइन या एक्सटेंशन को इंस्टॉल किए बिना एक समाधान है आश्चर्य होगा। जैसा कि किसी ने उल्लेख किया है कि एक सुरक्षा समस्या होगी। एक वेबसाइट लोगों के कंप्यूटर से फ़ाइलों को पकड़ने और उन्हें अपने ज्ञान के बिना अपलोड करने में सक्षम हो जाएगा।

Answer 7

SWELL फ्रेमवर्क देखें। इसका जावास्क्रिप्ट आधारित है।

Answer 8

यह एक पुराना सवाल है, लेकिन यह मेरे खोज परिणामों में आया।

तो संदर्भ के लिए, एचटीएमएल 5 फ़ाइल कक्षाओं और ड्रैग और ड्रॉप का उपयोग करें। यहाँ विवरण के साथ

अनुच्छेद: http://www.html5rocks.com/en/tutorials/file/dndfiles/

मेरे लिए नहीं