Можно ли предварительно просмотреть локальные изображения перед загрузкой их через форму? - PullRequest
Новая
       35

Можно ли предварительно просмотреть локальные изображения перед загрузкой их через форму?

18 голосов
/ 28 мая 2009

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

Я пробовал несколько подходов javascript, но я всегда сталкиваюсь с ошибками безопасности. Я не возражаю против использования java или flash, пока решение изящно ухудшается для тех пользователей, у которых их нет. (Они не получат превью, и они также не получат назойливую «установку этой вещи».)

Кто-нибудь делал это простым, многократно используемым способом?

P.S. Я знаю, что песочница есть, но должна ли песочница находиться в темной закрытой комнате, где все окна затемнены?

Ответы [ 6 ]

26 голосов
/ 03 октября 2011

Не нужно модных вещей. Все, что вам нужно, это функция createObjectURL, которая создает URL-адрес, который может использоваться в качестве изображения src и может быть получен прямо из локального файла.

Допустим, вы выбрали пару изображений с компьютера пользователя, используя элемент ввода файла (<input type="file" />). Вот как вы можете создать превью для файлов изображений для него: 

function createObjectURL(object) {
    return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
}

function revokeObjectURL(url) {
    return (window.URL) ? window.URL.revokeObjectURL(url) : window.webkitURL.revokeObjectURL(url);
}

function myUploadOnChangeFunction() {
    if(this.files.length) {
        for(var i in this.files) {
            var src = createObjectURL(this.files[i]);
            var image = new Image();
            image.src = src;
            // Do whatever you want with your image, it's just like any other image
            // but it displays directly from the user machine, not the server!
        }
    }
}
1 голос
/ 28 мая 2009

Первый шаг - это поиск пути к изображению. JavaScript разрешено запрашивать элемент управления загрузкой для имени файла / пути, но (из соображений безопасности) различные браузеры показывают движку JS разные вещи, чем отображают пользователю - они, как правило, сохраняют имя файла без изменений, так что вы можете хотя бы проверить его расширение, но вы можете получить c:\fake_path\ или какую-то подобную запутанную вещь перед именем файла. Попытка сделать это в различных браузерах даст вам представление о том, что возвращается как реальный путь, а что подделывается и где.

Второй шаг - отображение изображения. Можно отобразить локальные изображения, если вы знаете их пути, с помощью тегов img с исходными URL-адресами file://, если браузер пользователя допускает схему file://. (По умолчанию Firefox этого не делает.) Поэтому, если вы можете заставить пользователя сказать, каков полный путь к изображению, вы можете, по крайней мере, попытаться загрузить его.

0 голосов
/ 16 февраля 2015

Вы можете попробовать этот подход, хотя кажется, что он не работает в IE.

http://saravani.wordpress.com/2012/03/14/preview-of-an-image-before-it-is-uploaded/

Это просто и быстро для кодирования.

Я поместил код на случай, если источник умрет:

Сценарий: 

    <!-- Assume jQuery is loaded -->
    <script>
      function readURL(input) {
        if (input.files && input.files[0]) {
          var reader = new FileReader();

          reader.onload = function (e) {
            $('#img_prev')
              .attr('src', e.target.result)
              .width(150)
              .height(200);
          };

          reader.readAsDataURL(input.files[0]);
        }
      }
    </script>

В HTML: 

    <!--[if IE]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    </head>
    <body>
      <input type='file' onchange="readURL(this);" />
      <img id="img_prev" src="#" alt="your image" />
    </body>
0 голосов
/ 28 мая 2009

Я когда-либо видел только апплеты Java, которые делают это, например, апплет загрузки изображений на Facebook. Недостатком подхода Java является то, что пользователю будет предложено доверять апплету до его запуска, что является своего рода раздражением, но это позволяет апплету предоставлять файловый браузер с предварительным просмотром изображения или делать более интересные вещи, например позволяет пользователю загрузить весь каталог.

0 голосов
/ 28 мая 2009

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

0 голосов
/ 28 мая 2009

Вот скрипт jQuery + PHP для загрузки изображения и его предварительного просмотра.

...