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

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

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

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

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

ОТВЕТЫ

Ответ 1

Нет необходимости в причудливых вещах. Все, что вам нужно - это функция 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 just like any other image
            // but it displays directly from the user machine, not the server!
        }
    }
}

Ответ 2

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

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

Ответ 4

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

Ответ 5

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

Ответ 6

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

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

Это простой и быстрый код.

Я помещаю код здесь на всякий случай, когда источник умирает:

Script:

    <!-- 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>