वेबमैट्रिक्स

Question

में AJAX के साथ चित्र पूर्वावलोकन के साथ जावास्क्रिप्ट/jQuery का उपयोग करने के लिए इनपुट प्रकार "फ़ाइल" से बाइनरी छवि डेटा प्राप्त करें। बाइनरी छवि डेटा प्राप्त करने के लिए शोध करने या अन्यथा यह पता लगाने की कोशिश करते समय मुझे परेशानी हो रही है कि (यदि यह भी संभव है) प्रकार फ़ाइल के एचटीएमएल इनपुट तत्व से जावास्क्रिप्ट/jQuery का उपयोग करना।

मैं वेबमैट्रिक्स (सी #) का उपयोग कर रहा हूं, लेकिन यह जानना आवश्यक नहीं है कि, अगर इस प्रश्न के प्रयोजनों का उत्तर जावास्क्रिप्ट/jQuery का उपयोग करके ही किया जा सकता है।

मैं छवि ले सकता हूं, इसे डेटाबेस में (बाइनरी डेटा के रूप में) सहेज सकता हूं, फिर बाद में पोस्ट करने के बाद बाइनरी डेटा से पृष्ठ पर तस्वीर दिखा सकता हूं। हालांकि, यह अपलोड करने से पहले मुझे एक तस्वीर पूर्वावलोकन के बिना छोड़ देता है, जिसके लिए मैं लगभग निश्चित हूं कि मुझे AJAX का उपयोग करना होगा।

फिर से, यह संभव भी नहीं हो सकता है, लेकिन जब तक मैं बाइनरी छवि डेटा प्राप्त कर सकता हूं, मुझे विश्वास है कि मैं इसे AJAX के साथ सर्वर पर धक्का दे सकता हूं और छवि को उसी तरह संसाधित कर सकता हूं जैसे मैं इसे ले रहा था डेटाबेस से (ध्यान दें कि मैं GUID का उपयोग करके छवि फ़ाइलों को स्वयं सहेजता नहीं हूं और यह सब, मैं बस बाइनरी डेटा को सहेजता हूं)।

यदि इनपुट तत्व का उपयोग करके एक तस्वीर पूर्वावलोकन दिखाने का कोई आसान तरीका है, तो यह भी ठीक काम करेगा, क्योंकि यह करने के लिए मेरे पीछे पूरा विचार एक तस्वीर पूर्वावलोकन दिखाने से पहले एक तस्वीर पूर्वावलोकन दिखाने के लिए है फॉर्म बटन सबमिट करें (या कम से कम उस भ्रम को बनाएं)।

** * ** * ****अद्यतन* ** * ** * ****

मैं करता हूँ इसे किसी अन्य प्रश्न का डुप्लिकेट नहीं मानें क्योंकि मेरा असली प्रश्न है:

जावास्क्रिप्ट/jQuery के साथ इनपुट प्रकार "फ़ाइल" से छवि डेटा कैसे प्राप्त कर सकता हूं?

यदि मैं डेटा को सीधे (सही प्रारूप में) सर्वर पर प्राप्त कर सकता हूं, तो मुझे वहां इसके साथ काम करने में सक्षम होना चाहिए, और फिर इसे AJAX के साथ वापस कर देना चाहिए (हालांकि, मैं बिल्कुल AJAX विशेषज्ञ नहीं हूं)।

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

Answer 1

संक्षिप्त उत्तर: jQuery form plugin का उपयोग करें, यह AJAX- फॉर्म फ़ाइल अपलोड के लिए भी सबमिट करता है।

1. RAW छवि
2. आकार को अपलोड करने और छवि का अनुकूलन:

   tl डॉ

   थंबनेल पूर्वावलोकन लोकप्रिय वेबसाइटों आम तौर पर कई कदम, मूल रूप से वेबसाइट द्वारा किया जाता है तो इन चरणों का करना है डेटा स्टोरेज

3. उस फ़ाइल के लिए एक अस्थायी लिंक जेनरेट करें (आमतौर पर सर्वर पर बनाए रखा सर्वर में संग्रहीत HTTP)
4. इसे वापस उपयोगकर्ता को भेजें, पूर्वावलोकन 'उपयोगकर्ता छवि की पुष्टि करता है के बाद
5. असल छवि को संग्रहित

कुछ बुरा समाधान हैं:

1. आधुनिक ब्राउज़रों के अधिकांश विकल्पों स्थानीय फ़ाइलों की स्क्रिप्ट पहुंचने करने के लिए है, लेकिन आप आमतौर पर अपने उपयोगकर्ताओं को उन निम्न स्तर की सेटिंग्स के साथ टिंकर करने के लिए मत कहें।
2. इससे पहले इंटरनेट एक्सप्लोरर (आह ... हाँ यह शर्म की बात है) और आधुनिक ब्राउज़रों के प्राचीन संस्करणों फ़ाइल इनपुट बॉक्स है, जो आप सीधे एक टैग उत्पन्न कर सकते हैं की 'मूल्य' पर पढ़ा पूर्ण फ़ाइल पथ का पर्दाफाश और कहा कि मूल्य का उपयोग करेगा । (अब इसे कुछ सी:/fakepath/... चीज़ द्वारा प्रतिस्थापित किया गया है।)
3. फ़ाइल चयन पैनल की नकल करने के लिए एडोब फ्लैश का उपयोग करें, यह स्थानीय फ़ाइलों को ठीक से पढ़ सकता है। लेकिन यह जावास्क्रिप्ट में गुजर एक अन्य विषय

आशा इन में मदद करता है ...। ;)

अद्यतन

मैं वास्तव में एक स्थिति है कि अपलोड करने से पहले एक पूर्वावलोकन की आवश्यकता भर में आया था, मैं भी यहां डाल करना चाहते हैं। मुझे याद है सकता है, वहाँ आधुनिक ब्राउज़रों कि वास्तविक फ़ाइल पथ मास्किंग से पहले FileReader लागू नहीं है, लेकिन मुझे सही करने के लिए यदि ऐसा है तो स्वतंत्र महसूस में कोई संक्रमणकालीन संस्करण थे। इस समाधान को अधिकांश ब्राउज़रों को पूरा करना चाहिए, जब तक वे jQuery द्वारा समर्थित हैं।

// 1. Listen to change event 
$(':file').change(function() { 
    // 2. Check if it has the FileReader class 
    if (!this.files) { 
    // 2.1. Old enough to assume a real path 
    setPreview(this.value); 
    } 
    else { 
    // 2.2. Read the file content. 
    var reader = new FileReader(); 

    reader.onload = function() { 
     setPreview(reader.result); 
    }; 

    reader.readAsDataURL(); 
    } 
}); 

function setPreview(url) { 
    // Do preview things. 
    $('.preview').attr('src', url); 
}