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

Question

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

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

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

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

Answer 1

Here's a jQuery + PHP script для загрузки изображения с его предварительным просмотром.

Answer 2

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

Answer 3

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

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

Answer 4

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

Answer 5

Нет необходимости в причудливых вещах. Все, что вам нужно, это функция 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! 
     } 
    } 
} 

Answer 6

Вы можете попробовать этот подход, хотя и кажется, что это не работает на 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>