Html dosyası yerelse (benim C sürücümde) çalışır, ancak html dosyası bir sunucuda ve görüntü dosyası yerelse çalışmaz. Neden?
Herhangi bir olası geçici çözüm var mı?
Html dosyası yerelse (benim C sürücümde) çalışır, ancak html dosyası bir sunucuda ve görüntü dosyası yerelse çalışmaz. Neden?
Herhangi bir olası geçici çözüm var mı?
src=""
Yanıtlar:
İstemcinin yerel dosya sistemi dosyalarını talep etmesi ve ardından bunların içinde ne olduğunu bulmak için JavaScript'i kullanması bir güvenlik açığı olur.
Bunu aşmanın tek yolu, bir tarayıcıda bir uzantı oluşturmaktır. Firefox uzantıları ve IE uzantıları yerel kaynaklara erişebilir. Chrome çok daha kısıtlayıcıdır.
"C: /localfile.jpg" yerine "file: // C: /localfile.jpg" kullanmamalı mısınız?
Yerel bir html sayfasına erişmediğiniz sürece tarayıcıların yerel dosya sistemine erişmesine izin verilmez. Resmi bir yere yüklemelisiniz. Html dosyasıyla aynı dizindeyse, o zaman şunu kullanabilirsiniz:<img src="localfile.jpg"/>
C:
tanınan bir URI şeması değil. Onun file://c|/...
yerine deneyin .
Dürüst olmak gerekirse en kolay yol, sunucuya dosya barındırma eklemekti.
IIS'yi aç
Varsayılan Web Sitesi Altına Sanal Dizin Ekleme
"NETWORK SERVICE" ve "IIS AppPool \ DefaultAppPool" için C: sürücüsündeki klasöre uygun izinleri ekleyin
Varsayılan Web Sitesini Yenile
Ve bitirdiniz. Artık http: //SunucunuzunAdı/whateverYourFolderNameIs/yourImage.jpg adresine giderek bu klasördeki herhangi bir görüntüye göz atabilir ve bu url'yi img src'nizde kullanabilirsiniz.
Umarım bu birine yardımcı olur
IE 9: Kullanıcının resmi sunucuya göndermeden önce bir göz atmasını istiyorsanız: Kullanıcı web sitesini "güvenilen Web sitesi listesine" EKLEMELİDİR.
yerel sürücü / klasör dosyasını göstermek için javascript'in FileReader () ve readAsDataURL (fileContent) işlevini kullanabiliriz. Değişiklik olayını görüntüye bağlayın ve ardından javascript'in showpreview işlevini çağırın. Bunu dene -
<!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>
Newtang'ın güvenlik kuralları hakkındaki gözlemini bir kenara bırakırsak, sayfanızı görüntüleyen herhangi birinin doğru görsellere sahip olacağını nasıl bileceksiniz c:\localfile.jpg
? Yapamazsın. Yapabileceğini düşünsen bile yapamazsın. Öncelikle, bir pencere ortamını varsayar.
Yapmaya çalıştığınız şey için iki olasılık görüyorum:
Bir sunucuda çalışan web sayfanızın, orijinal olarak tasarladığınız bilgisayardaki dosyayı bulmasını mı istiyorsunuz?
Sayfada görüntülenen bilgisayardan almasını mı istiyorsunuz?
1. seçenek mantıklı değil :)
Seçenek 2 bir güvenlik açığı olabilir, tarayıcı bir web sayfasının (web'den sunulan) izleyicinin makinesine içerik yüklemesini yasaklar.
Kyle Hudson sana ne yapman gerektiğini söyledi, ama bu o kadar basit ki, yapmak istediğin tek şeyin bu olduğuna inanmakta zorlanıyorum.
Google Chrome tarayıcısını kullanıyorsanız böyle kullanabilirsiniz
<img src="E://bulbpro/pic_bulboff.gif" width="150px" height="200px">
Ancak Mozila Firefox kullanıyorsanız, "dosya" eklemeniz gerekir, örn.
<img src="file:E://bulbpro/pic_bulboff.gif" width="150px" height="200px">
Görüntüyü de yüklemeniz, ardından sunucudaki görüntüye bağlamanız gerekir.
görüntünün kullanıcı tarafından seçilen bir şey olmasına ne dersiniz? Bir input: file etiketi kullanın ve ardından görüntüyü seçtikten sonra, istemci tarafındaki web sayfasında göstermek ister misiniz? Bu çoğu şey için yapılabilir. Şu anda IE için çalışmasını sağlamaya çalışıyorum, ancak tüm Microsoft ürünlerinde olduğu gibi, bu bir küme çatalı ().
Yerel bir web sitesini yalnızca kendiniz veya belirli istemciler için dağıtıyorsanız mklink /D MyImages "C:/MyImages"
, web sitesinin kök dizininde cmd'de yönetici olarak çalıştırarak bu sorunu çözebilirsiniz . Sonra html'de<img src="MyImages/whatever.jpg">
ve mklink tarafından kurulan sembolik bağ, göreli src bağlantısını C sürücünüzdeki bağlantıya bağlayacaktır. Bu sorunu benim için çözdü, bu yüzden bu soruya gelenlere yardımcı olabilir.
(Açıkçası, insanların bilgisayarlarında cmd komutlarını kolayca çalıştıramayacağınız için bu genel web sitelerinde işe yaramayacaktır)
Çok sayıda teknik denedim ve sonunda C # tarafında ve JS tarafında bir tane buldum. Src niteliğine fiziksel bir yol veremezsiniz, ancak base64 dizesini src to Img etiketi olarak verebilirsiniz. Aşağıdaki C # kod örneğine bakalım.
<asp:Image ID="imgEvid" src="#" runat="server" Height="99px"/>
C # kodu
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);
}
Umarım bu yardımcı olur