यह काम करता है यदि html फ़ाइल स्थानीय है (मेरी C ड्राइव पर), लेकिन नहीं अगर html फ़ाइल सर्वर पर है और छवि फ़ाइल स्थानीय है। ऐसा क्यों है?
किसी भी संभव workarounds?
यह काम करता है यदि html फ़ाइल स्थानीय है (मेरी C ड्राइव पर), लेकिन नहीं अगर html फ़ाइल सर्वर पर है और छवि फ़ाइल स्थानीय है। ऐसा क्यों है?
किसी भी संभव workarounds?
src=""
जवाबों:
यह एक सुरक्षा भेद्यता होगी यदि ग्राहक स्थानीय फ़ाइल सिस्टम फ़ाइलों का अनुरोध कर सकता है और फिर जावास्क्रिप्ट का उपयोग करके यह पता लगा सकता है कि उनमें क्या है।
इसके आस-पास एकमात्र तरीका एक ब्राउज़र में एक एक्सटेंशन का निर्माण करना है। फ़ायरफ़ॉक्स एक्सटेंशन और IE एक्सटेंशन स्थानीय संसाधनों तक पहुंच सकते हैं। क्रोम बहुत अधिक प्रतिबंधक है।
क्या आपको "C: /localfile.jpg" के बजाय "फ़ाइल: // C: /localfile.jpg" का उपयोग नहीं करना चाहिए?
जब तक आप स्थानीय HTML पृष्ठ तक नहीं पहुँचते, तब तक ब्राउज़र को स्थानीय फ़ाइल सिस्टम तक पहुँचने की अनुमति नहीं है। आपको कहीं न कहीं इमेज अपलोड करनी होगी। यदि यह html फ़ाइल के समान निर्देशिका में है, तो आप उपयोग कर सकते हैं<img src="localfile.jpg"/>
C:
मान्यताप्राप्त URI स्कीम नहीं है। file://c|/...
इसके बजाय कोशिश करें ।
ईमानदारी से सबसे आसान तरीका सर्वर में फ़ाइल होस्टिंग जोड़ना था।
IIS खोलें
डिफ़ॉल्ट वेब साइट के तहत एक वर्चुअल निर्देशिका जोड़ें
C: फ़ोल्डर पर उपयुक्त अनुमतियाँ जोड़ें "NETWORK SERVICE" और "IIS AppPool \ DefaultAppool" के लिए ड्राइव करें
डिफ़ॉल्ट वेब साइट को ताज़ा करें
और आपने कल लिया। अब आप http: //yourServerName/whateverYourFolderNameIs/yourImage.jpg पर नेविगेट करके उस फ़ोल्डर में किसी भी छवि को ब्राउज़ कर सकते हैं और अपने img src में उस url का उपयोग कर सकते हैं
आशा है कि यह किसी की मदद करता है
IE 9: यदि आप चाहते हैं कि उपयोगकर्ता सर्वर पर पोस्ट करने से पहले छवि पर एक नज़र डालें: उपयोगकर्ता को वेबसाइट को "विश्वसनीय वेबसाइट सूची" में जोड़ना चाहिए।
हम जावास्क्रिप्ट के FileReader () का उपयोग कर सकते हैं और यह स्थानीय ड्राइव / फ़ोल्डर फ़ाइल दिखाने के लिए readAsDataURL (fileContent) फ़ंक्शन है। ईवेंट को छवि में बदलें और फिर जावास्क्रिप्ट के शो-पॉइंट फ़ंक्शन को कॉल करें। इसे इस्तेमाल करे -
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;'>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function showpreview(e) {
var reader = new FileReader();
reader.onload = function (e) {
$("#previewImage").attr("src", e.target.result);
}
//Imagepath.files[0] is blob type
reader.readAsDataURL(e.files[0]);
}
</script>
</head>
<body >
<div>
<input type="file" name="fileupload" value="fileupload" id="fileupload" onchange='showpreview(this)'>
</div>
<div>
</div>
<div>
<img width="50%" id="previewImage">
</div>
</body>
</html>
एक तरफ सुरक्षा नियमों के बारे में न्यूटैंग का अवलोकन, आपको कैसे पता चलेगा कि जो कोई भी आपके पृष्ठ को देखता है, उसकी सही छवियां होंगी c:\localfile.jpg
? आप नहीं कर सकते। अगर आपको लगता है कि आप कर सकते हैं, तो भी आप नहीं कर सकते। यह एक चीज के लिए, एक विंडोज़ वातावरण निर्धारित करता है।
मैं दो संभावनाएं देखता हूं कि आप क्या करने की कोशिश कर रहे हैं:
आप अपना वेबपृष्ठ चाहते हैं, जो सर्वर पर चल रहा है, उस फ़ाइल को कंप्यूटर पर ढूंढने के लिए जिसे आपने मूल रूप से डिज़ाइन किया था?
आप इसे उस पीसी से प्राप्त करना चाहते हैं जो पृष्ठ पर देख रहा है?
विकल्प 1 सिर्फ मतलब नहीं है :)
विकल्प 2 एक सुरक्षा छेद होगा, ब्राउज़र दर्शकों की मशीन पर सामग्री लोड करने से वेब पेज (वेब से सेवा) पर प्रतिबंध लगाता है।
काइल हडसन ने आपको बताया कि आपको क्या करने की आवश्यकता है, लेकिन यह इतना बुनियादी है कि मुझे विश्वास करना मुश्किल है कि यह सब आप करना चाहते हैं।
यदि आप Google क्रोम ब्राउज़र का उपयोग करते हैं तो आप इस तरह का उपयोग कर सकते हैं
<img src="E://bulbpro/pic_bulboff.gif" width="150px" height="200px">
लेकिन अगर आप मोज़िला फ़ायरफ़ॉक्स का उपयोग करते हैं, तो आपको "फ़ाइल" पूर्व जोड़ना होगा।
<img src="file:E://bulbpro/pic_bulboff.gif" width="150px" height="200px">
यदि आप किसी स्थानीय वेबसाइट को केवल अपने लिए या कुछ क्लाइंट्स के लिए तैनात कर रहे हैं, तो आप इसके लिए mklink /D MyImages "C:/MyImages"
cmd में एक व्यवस्थापक के रूप में वेबसाइट रूट डायरेक्टरी में चल सकते हैं । फिर HTML में, करें <img src="MyImages/whatever.jpg">
और mklink द्वारा स्थापित प्रतीकात्मक लिंक आपके सी ड्राइव पर लिंक के साथ रिश्तेदार src लिंक को कनेक्ट करेगा। इसने मेरे लिए इस मुद्दे को हल किया, इसलिए यह दूसरों को मदद कर सकता है जो इस सवाल पर आते हैं।
(जाहिर है कि यह सार्वजनिक वेबसाइटों के लिए काम नहीं करेगा क्योंकि आप लोगों के कंप्यूटर पर आसानी से cmd कमांड नहीं चला सकते हैं)
उपयोगकर्ता द्वारा चयनित छवि के बारे में क्या होगा? एक इनपुट का उपयोग करें: फ़ाइल टैग और फिर छवि का चयन करने के बाद, इसे क्लाइंटसाइड वेबपेज पर दिखाएं? यह ज्यादातर चीजों के लिए उल्लेखनीय है। अभी मैं IE के लिए काम करने की कोशिश कर रहा हूं, लेकिन सभी Microsoft उत्पादों के साथ, यह एक क्लस्टर फोर्क () है।
मैंने बहुत सारी तकनीकों की कोशिश की है और अंत में C # पक्ष और JS साइड में एक पाया है। आप src विशेषता के लिए एक भौतिक पथ नहीं दे सकते, लेकिन आप बेस 64 स्ट्रिंग को src के रूप में Img टैग में दे सकते हैं। नीचे दिए गए C # कोड उदाहरण में देखें।
<asp:Image ID="imgEvid" src="#" runat="server" Height="99px"/>
सी # कोड
if (File.Exists(filepath)
{
byte[] imageArray = System.IO.File.ReadAllBytes(filepath);
string base64ImageRepresentation = Convert.ToBase64String(imageArray);
var val = $"data: image/png; base64,{base64ImageRepresentation}";
imgEvid.Attributes.Add("src", val);
}
आशा है कि यह मदद करेगा
के साथ शुरू होता है file:///
और अंत में filename
काम करना चाहिए:
<img src="file:///C:/Users/91860/Desktop/snow.jpg" alt="Snow" style="width:100%;">