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

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

0 голосов
/ 14 декабря 2010

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

Я имею в виду, когда пользователь выбирает файл из своей системы, веб-страница уже показывает ему файлы, которые он хочет загрузить. Как я могу сделать это, используя HTML и JQuery?

Ответы [ 2 ]

1 голос
/ 14 декабря 2010

Вы не можете, по крайней мере, не во всех браузерах.

Это связано с тем, что некоторые браузеры предоставляют полный путь к <input type='file'> - таким образом вы можете попытаться показать элемент на жестком диске пользователя (не пропустите настройки безопасности определенных браузеров)

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

Что вы всегда можете сделать, это загрузить файл с помощью jQuery (.ajax, чтобы страница не обновлялась), а затем показать его пользователю. В наше современное время загрузка файла не вызывает особого беспокойства (особенно если вы предоставляете анимацию во время ее работы).

Если вам действительно нужна эта функция, вы всегда можете использовать Java-апплет (например, facebook или imageshack) для предварительного просмотра. Хотя не у каждого пользователя (достаточно свежая версия) Java установлена ​​и включена.

Если вы все еще хотите реализовать это для браузеров, которые предоставляют полный путь (скажем, вы работаете в корпоративной среде, и все используют один и тот же браузер, или у вас он грациозно ухудшается, и вы просто предлагаете эту функцию пользователям, для которых это работает), вы просто используете .val() из <input type='file'>, чтобы получить путь к имени файла. Добавить file:// перед и отобразить (сбросить в img или около того)

Подробнее:

0 голосов
/ 24 октября 2013 
<div class="upload-preview">
  <img />
</div>
<input class="file" name="logo" type="file">



$(document).ready(function(){
var preview = $(".upload-preview img");

$(".file").change(function(event){
   var input = $(event.currentTarget);
   var file = input[0].files[0];
   var reader = new FileReader();
   reader.onload = function(e){
       image_base64 = e.target.result;
       preview.attr("src", image_base64);
   };
   reader.readAsDataURL(file);
  });
});

Вы можете использовать эту скрипку http://jsfiddle.net/Kulgar/57F67/

...