Почему я не могу сделать <img src="C:/localfile.jpg">? - PullRequest
Новая
       7

Почему я не могу сделать <img src="C:/localfile.jpg">?

82 голосов
/ 03 ноября 2010

Работает, если html-файл является локальным (на моем диске C), но не работает, если html-файл находится на сервере и файл изображения является локальным.Почему это так?

Любые возможные обходные пути?

Ответы [ 13 ]

53 голосов
/ 03 ноября 2010

Было бы уязвимостью, если бы клиент мог запросить файлы локальной файловой системы и затем использовать JavaScript, чтобы выяснить, что в них.

Единственный способ обойти это - создать расширение в браузере. Расширения Firefox и IE могут получать доступ к локальным ресурсам. Хром гораздо более строгий.

28 голосов
/ 03 ноября 2010

не следует ли использовать «file: // C: /localfile.jpg» вместо «C: /localfile.jpg»?

25 голосов
/ 03 ноября 2010

Браузеры не имеют доступа к локальной файловой системе, если вы не обращаетесь к локальной html-странице.Вы должны загрузить изображение куда-нибудь.Если он находится в том же каталоге, что и HTML-файл, вы можете использовать <img src="localfile.jpg"/>

15 голосов
/ 03 ноября 2010

C: не является распознанной схемой URI.Попробуйте file://c|/... вместо.

4 голосов
/ 05 октября 2016

Честно говоря, проще всего было добавить файловый хостинг на сервер.

  • Открыть IIS

  • Добавление виртуального каталога на веб-сайте по умолчанию

    • виртуальный путь будет тем, что вы хотите просмотреть в браузере. Поэтому, если вы выберете " имя_сервера / images , вы сможете перейти к нему, перейдя к http://serverName/images
    • Затем добавьте физический путь на диск C:

  • Добавьте соответствующие разрешения для папки на диске C: для «NETWORK SERVICE» и «IIS AppPool \ DefaultAppPool»

  • Обновить веб-сайт по умолчанию

  • И все готово. Теперь вы можете перейти к любому изображению в этой папке, перейдя к http://yourServerName/whateverYourFolderNameIs/yourImage.jpg и использовать этот URL в вашем img src

Надеюсь, это кому-нибудь поможет

3 голосов
/ 27 сентября 2012

IE 9: если вы хотите, чтобы пользователь посмотрел изображение, прежде чем он отправит его на сервер: Пользователь должен ДОБАВИТЬ сайт в «список доверенных сайтов».

2 голосов
/ 03 ноября 2010

Наблюдение Newtang о правилах безопасности в стороне, как вы узнаете, что у любого, кто просматривает вашу страницу, будут правильные изображения на c:\localfile.jpg? Ты не можешь Даже если вы думаете, что можете, вы не можете. С одной стороны, это предполагает среду Windows.

1 голос
/ 08 декабря 2015

если вы используете браузер Google Chrome, вы можете использовать вот так 

<img src="E://bulbpro/pic_bulboff.gif"   width="150px" height="200px">

Но если вы используете Mozila Firefox, вам нужно добавить «file» ex. 

<img src="file:E://bulbpro/pic_bulboff.gif"   width="150px" height="200px">
1 голос
/ 03 ноября 2010

Я вижу две возможности для того, что вы пытаетесь сделать:

  1. Вы хотите, чтобы ваша веб-страница, работающая на сервере, находила файл на компьютере, для которого она изначально была разработана?

  2. Вы хотите получить его с компьютера, который просматривает страницу?

Вариант 1 просто не имеет смысла:)

Вариант 2 - это дыра в безопасности, браузер запрещает веб-странице (обслуживаемой из Интернета) загружать контент на компьютер зрителя.

Кайл Хадсон сказал вам, что вам нужно делать, но это настолько просто, что мне трудно поверить, что это все, что вы хотите сделать.

0 голосов
/ 02 апреля 2018

мы можем использовать javascript FileReader () и его readAsDataURL (fileContent) , чтобы показать файл локального диска / папки.Привязать событие изменения к изображению, затем вызвать функцию showpreview javascript.Попробуйте это - 

<!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>
        &nbsp;
    </div>
    <div>
    <img width="50%" id="previewImage">
    </div>
</body>
</html>
Страница:
...