Загрузка изображения в <img> из <входного файлa>

Я пытаюсь загрузить изображение, выбранное пользователем через элемент.

Я добавил обработчик события onchange в элемент ввода следующим образом:

<input type="file" name="picField" id="picField" size="24" onchange="preview_2(this);" alt=""/>

а функция preview_2:

var outImage ="imagenFondo";
function preview_2(what){
    globalPic = new Image();
    globalPic.onload = function() {
        document.getElementById(outImage).src = globalPic.src;
    }
    globalPic.src=what.value;
}

где outImage имеет значение id тега, где я хочу, чтобы новое изображение было загружено.

Однако, похоже, что onload никогда не происходит, и он ничего не загружает в html.

Что мне делать?

Ответ 1

В браузерах, поддерживающих File API, вы можете использовать FileReader, чтобы читать файлы после их выбора пользователем.

Пример

document.getElementById('picField').onchange = function (evt) {
    var tgt = evt.target || window.event.srcElement,
        files = tgt.files;

    // FileReader support
    if (FileReader && files && files.length) {
        var fr = new FileReader();
        fr.onload = function () {
            document.getElementById(outImage).src = fr.result;
        }
        fr.readAsDataURL(files[0]);
    }

    // Not supported
    else {
        // fallback -- perhaps submit the input to an iframe and temporarily store
        // them on the server until the user session ends.
    }
}

Поддержка браузера

IE 10
Safari 6.0.2
Chrome 7
Firefox 3.6
Opera 12.02

Если файл API не поддерживается, вы не можете (в большинстве безопасных браузеров) получить полный путь к файлу из поля ввода файла и не получить доступ к данным. Единственное жизнеспособное решение - отправить форму в скрытый iframe и предварительно загрузить файл на сервер. Затем, когда этот запрос завершен, вы можете установить src изображения в местоположение загруженного файла.

Ответ 2

Как сказал iEamin в своем ответе, HTML 5 теперь поддерживает это. Ссылка, которую он дал, http://www.html5rocks.com/en/tutorials/file/dndfiles/, отличная. Вот минимальный образец, основанный на образцах на этом сайте, но посмотрите на этот сайт для более подробных примеров.

Добавьте прослушиватель событий onchange в свой HTML:

<input type="file" onchange="onFileSelected(event)">

Сделайте тег изображения с идентификатором (я указываю height=200, чтобы изображение не было слишком большим на экране):

<img id="myimage" height="200">

Вот JavaScript из прослушивателя событий onchange. Он принимает объект File, который был передан как event.target.files[0], строит a FileReader для чтения его содержимого и устанавливает новый прослушиватель событий для назначения результирующего URL data: тегу img:

function onFileSelected(event) {
  var selectedFile = event.target.files[0];
  var reader = new FileReader();

  var imgtag = document.getElementById("myimage");
  imgtag.title = selectedFile.name;

  reader.onload = function(event) {
    imgtag.src = event.target.result;
  };

  reader.readAsDataURL(selectedFile);
}

Ответ 3

Andy E правильно, что для этого не существует HTML-метода *; но если вы хотите использовать Flash, вы можете это сделать. Следующее работает над системами, на которых установлена Flash. Если ваше приложение должно работать на iPhone, то, конечно, вам понадобится резервное решение на основе HTML.

* ( Обновление 4/22/2013: HTML теперь поддерживает это в HTML5. См. другие ответы.)

Загрузка Flash также имеет другие преимущества - Flash дает вам возможность показывать индикатор выполнения, поскольку загрузка большого файла продолжается. (Я уверен, что Gmail делает это, используя Flash за кулисами, хотя я могу ошибаться в этом.)

Вот пример приложения Flex 4, который позволяет пользователю выбрать файл, а затем отобразит его:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               creationComplete="init()">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Button x="10" y="10" label="Choose file..." click="showFilePicker()" />
    <mx:Image id="myImage" x="9" y="44"/>
    <fx:Script>
        <![CDATA[
            private var fr:FileReference = new FileReference();

            // Called when the app starts.
            private function init():void
            {
                // Set up event handlers.
                fr.addEventListener(Event.SELECT, onSelect);
                fr.addEventListener(Event.COMPLETE, onComplete);
            }

            // Called when the user clicks "Choose file..."
            private function showFilePicker():void
            {
                fr.browse();
            }

            // Called when fr.browse() dispatches Event.SELECT to indicate
            // that the user has picked a file.
            private function onSelect(e:Event):void
            {
                fr.load(); // start reading the file
            }

            // Called when fr.load() dispatches Event.COMPLETE to indicate
            // that the file has finished loading.
            private function onComplete(e:Event):void
            {
                myImage.data = fr.data; // load the file data into the Image
            }
        ]]>
    </fx:Script>
</s:Application>

Ответ 4

$('document').ready(function () {
    $("#imgload").change(function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#imgshow').attr('src', e.target.result);
            }
            reader.readAsDataURL(this.files[0]);
        }
    });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="imgload" >
 <img src="#" id="imgshow" align="left">

Ответ 5

Это можно сделать очень легко с HTML 5, см. эту ссылку: http://www.html5rocks.com/en/tutorials/file/dndfiles/