Загрузка изображения в <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">