Он работает, если файл html является локальным (на моем диске C), но не если файл html находится на сервере, а файл изображения является локальным. Почему это?
Возможные обходные пути?
Он работает, если файл html является локальным (на моем диске C), но не если файл html находится на сервере, а файл изображения является локальным. Почему это?
Возможные обходные пути?
Это будет уязвимость системы безопасности, если клиент может запросить файлы локальной файловой системы, а затем использовать JavaScript для определения того, что в них.
Единственный способ создать это расширение в браузере. Расширения Firefox и расширения IE могут обращаться к локальным ресурсам. Chrome гораздо более ограничительный.
Браузеру запрещается доступ к локальной файловой системе, если вы не получаете доступ к локальной странице html. Вы должны загрузить изображение где-нибудь. Если он находится в том же каталоге, что и файл html, вы можете использовать <img src="localfile.jpg"/>
Не следует использовать "файл://C:/localfile.jpg" вместо "C:/localfile.jpg"?
C:
не является признанной схемой URI. Вместо этого попробуйте file://c|/...
.
IE 9: Если вы хотите, чтобы пользователь взглянул на изображение, прежде чем отправлять его на сервер: Пользователь должен ДОБАВИТЬ веб-сайт в список надежных веб-сайтов.
Наблюдение Newtang о правилах безопасности в стороне, как вы узнаете, что любой, кто просматривает вашу страницу, будет иметь правильные изображения в c:\localfile.jpg
? Вы не можете. Даже если вы думаете, что можете, вы не можете. Это предполагает среду Windows, с одной стороны.
Честно говоря, самым простым способом было добавить хостинг файлов на сервер.
Откройте IIS
Добавить виртуальный каталог по умолчанию по умолчанию
Добавьте соответствующие разрешения для папки на диске C: "NETWORK SERVICE" и "IIS AppPool\DefaultAppPool"
Обновить веб-сайт по умолчанию
И все готово. Теперь вы можете перейти к любому изображению в этой папке, перейдя к http://yourServerName/whateverYourFolderNameIs/yourImage.jpg и используя этот url в своем img src
Надеюсь, это поможет кому-то
Я вижу две возможности для того, что вы пытаетесь сделать:
Вы хотите, чтобы ваша веб-страница, работающая на сервере, находила файл на компьютере, который вы изначально его разработали?
Вы хотите, чтобы он извлекал его из компьютера, который просматривается на странице?
Вариант 1 просто не имеет смысла:)
Вариант 2 - это дыра в безопасности, браузер запрещает веб-странице (обслуживаемой из Интернета) загружать контент на машине просмотра.
Кайл Хадсон рассказал вам, что вам нужно сделать, но это настолько основательно, что мне трудно поверить, что это все, что вы хотите сделать.
Если вы используете браузер Chrome Chrome, вы можете использовать это как
<img src="E://bulbpro/pic_bulboff.gif" width="150px" height="200px">
Но если вы используете Mozilla Firefox, вам нужно добавить "файл" ex.
<img src="file:E://bulbpro/pic_bulboff.gif" width="150px" height="200px">
Вам необходимо загрузить изображение, а затем ссылку на изображение на сервере.
как насчет того, чтобы изображение было выбрано пользователем? Используйте тег ввода: файл, а затем после выбора изображения, покажите его на веб-странице клиента? Это выполнимо для большинства вещей. Сейчас я пытаюсь заставить его работать для IE, но, как и все продукты Microsoft, это кластер fork().
Если вы размещаете локальный сайт только для себя или для определенных клиентов, вы можете обойти это, запустив mklink/D MyImages "C: /MyImages"
в корневом каталоге веб-сайта в качестве администратора в cmd. Затем в html сделайте <img src="MyImages/whatever.jpg">
и символическая ссылка, установленная mklink, соединит относительную ссылку src со ссылкой на вашем диске C. Он решил этот вопрос для меня, поэтому он может помочь другим, кто подходит к этому вопросу.
(Очевидно, что это не будет работать для общедоступных веб-сайтов, поскольку вы не можете легко запускать команды cmd на компьютерах людей)
мы можем использовать 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: \, так как вы ожидаете, что html на сервере узнает ваш локальный C:\localfile.jpg? Все должно быть на сервере.
Переместите файл изображения на сервер. Вам нужно переименовать тег в < img src= "localfile.jpg" > Обязательно поместите его в тот же каталог, где документ, однако, я рекомендую вам добавить каталог "images" и поместить изображение в каталог изображений и написать вот так: < img src= "images/localfile.jpg" > на вашем документе.