Он работает, если html-файл является локальным (на моем диске C), но не, если html-файл находится на сервере, а файл изображения является локальным. Почему это?
Возможные обходные пути?
Он работает, если html-файл является локальным (на моем диске C), но не, если html-файл находится на сервере, а файл изображения является локальным. Почему это?
Возможные обходные пути?
src=""
Ответы:
Было бы уязвимостью безопасности, если бы клиент мог запросить файлы локальной файловой системы, а затем использовать JavaScript, чтобы выяснить, что в них.
Единственный способ обойти это - создать расширение в браузере. Расширения Firefox и расширения IE могут получать доступ к локальным ресурсам. Chrome гораздо более ограничен.
не следует ли вам использовать «file: // C: /localfile.jpg» вместо «C: /localfile.jpg»?
Браузерам не разрешен доступ к локальной файловой системе, если вы не обращаетесь к локальной html-странице. Вы должны куда-нибудь загрузить изображение. Если он находится в том же каталоге, что и файл html, вы можете использовать<img src="localfile.jpg"/>
C:
не является распознанной схемой URI. Попробуйте file://c|/...
вместо этого.
Честно говоря, проще всего было добавить на сервер файловый хостинг.
Откройте IIS
Добавить виртуальный каталог на веб-сайт по умолчанию
Добавьте соответствующие разрешения в папку на диске C: для «NETWORK SERVICE» и «IIS AppPool \ DefaultAppPool»
Обновить веб-сайт по умолчанию
И вы сделали. Теперь вы можете перейти к любому изображению в этой папке, перейдя по адресу http: //yourServerName/whateverYourFolderNameIs/yourImage.jpg и использовать этот URL-адрес в своем img src.
Надеюсь, это кому-то поможет
IE 9: если вы хотите, чтобы пользователь взглянул на изображение перед тем, как отправить его на сервер: пользователь должен ДОБАВИТЬ веб-сайт в «список доверенных веб-сайтов».
мы можем использовать javascript FileReader () и функцию readAsDataURL (fileContent) для отображения файла локального диска / папки. Свяжите событие изменения с изображением, затем вызовите функцию javascript showpreview. Попробуй это -
<!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
? Вы не можете. Даже если вы думаете, что можете, вы не можете. Во-первых, он предполагает среду Windows.
Я вижу две возможности для того, что вы пытаетесь сделать:
Вы хотите, чтобы ваша веб-страница, работающая на сервере, находила файл на компьютере, на котором вы ее изначально создали?
Вы хотите, чтобы он загружал его с компьютера, просматривающего страницу?
Вариант 1 просто не имеет смысла :)
Вариант 2 - это брешь в безопасности, браузер запрещает веб-странице (обслуживаемой из Интернета) загружать контент на компьютер зрителя.
Кайл Хадсон сказал вам, что вам нужно сделать, но это настолько элементарно, что мне трудно поверить, что это все, что вы хотите сделать.
если вы используете браузер Google Chrome, вы можете использовать это так
<img src="E://bulbpro/pic_bulboff.gif" width="150px" height="200px">
Но если вы используете Mozila Firefox, вам нужно добавить «файл» ex.
<img src="file:E://bulbpro/pic_bulboff.gif" width="150px" height="200px">
Вам также необходимо загрузить изображение, а затем ссылку на изображение на сервере.
как насчет того, чтобы изображение было выбрано пользователем? Использовать тег input: file, а затем, после выбора изображения, показывать его на клиентской веб-странице? Это выполнимо для большинства вещей. Прямо сейчас я пытаюсь заставить его работать для IE, но, как и во всех продуктах Microsoft, это вилка кластера ().
Если вы развертываете локальный веб-сайт только для себя или определенных клиентов, вы можете обойти это, запустив mklink /D MyImages "C:/MyImages"
корневой каталог веб-сайта в качестве администратора в cmd. Затем в html, do <img src="MyImages/whatever.jpg">
и символическая ссылка, установленная mklink, соединит относительную ссылку src со ссылкой на вашем диске C. Он решил эту проблему для меня, поэтому может помочь другим, кто задается этим вопросом.
(Очевидно, это не будет работать для общедоступных веб-сайтов, поскольку вы не можете легко запускать команды cmd на компьютерах людей)
Я перепробовал множество техник и наконец нашел один на стороне C # и стороне JS. Вы не можете указать физический путь к атрибуту src, но можете указать строку base64 как тег src to Img. Давайте посмотрим на приведенный ниже пример кода C #.
<asp:Image ID="imgEvid" src="#" runat="server" Height="99px"/>
Код C #
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);
}
Надеюсь, это поможет