Почему я не могу?

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

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

13 77
javascript html filesystems src

13 ответов:

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

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

51

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

25

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

24

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

14

IE 9 : Если вы хотите, чтобы пользователь взглянул на изображение, прежде чем он отправит его на сервер : Пользователь должен добавить сайт в список "доверенных сайтов".

3

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

2

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

  • открыть IIS

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

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

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

  • Обновить Веб-Сайт По Умолчанию

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

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

2

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

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

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

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

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

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

1

Если вы используете браузер 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">
1

вам нужно загрузить изображение, а, затем ссылку на картинку на сервере.

0

Как насчет того, чтобы изображение было чем-то выбранным пользователем? Используйте тег input:file, а затем, после того как они выберут изображение, покажите его на веб-странице на стороне клиента? Это выполнимо для большинства вещей. Прямо сейчас я пытаюсь заставить его работать для IE, но, как и все продукты microsoft, это кластерная вилка().

0

Если вы развертываете локальный веб-сайт только для себя или определенных клиентов, вы можете обойти это, запустив mklink /D MyImages "C:/MyImages" в корневом каталоге сайта в качестве администратора в cmd. Тогда в html, do <img src="MyImages/whatever.jpg"> и символическая ссылка, установленная mklink, соединит относительную ссылку src со ссылкой на вашем диске C. Это решило эту проблему для меня, так что это может помочь другим, кто приходит к этому вопросу.

(очевидно, что это не будет работать для общедоступных веб-сайтов, так как вы не можете запускать команды cmd компьютеры легко)

0

мы можем использовать javascript FileReader() и readAsDataURL(fileContent) функция для отображения файла локального диска / папки. Событие изменить привязку к изображение, а затем вызвать функцию настраиваемого предварительного просмотра в 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>
0