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

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

Я добавил обработчик события 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 тега, куда я хочу загрузить новое изображение.

Тем не менее, похоже, что загрузка никогда не происходит, и он ничего не загружает в HTML.

Что я должен делать?

 challet05 дек. 2017 г., 14:48

Ответы на вопрос(5)

$('document')..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">
// это работает для меня в jquery

Решение Вопроса

В браузерах, поддерживающихФайловый 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's session ends.
    }
}
Поддержка браузераIE 10Safari 6.0.2Chrome 7Firefox 3.6Опера 12.02

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

 ShrekOverflow27 мая 2015 г., 04:34
Интересно, зачем преобразовывать это в DataURL, а не просто в URL объекта?
 Valentina28 сент. 2010 г., 17:27
Lol ... это будет работать, если: через этот <input type = file> я загружаю изображение на сервер сразу и после этого загружаю изображение в html (с сервера)?
 Valentina28 сент. 2010 г., 17:31
да, я ищу решения для x-браузера, поэтому я попробую использовать опцию сервера. Большое спасибо!
 Valentina28 сент. 2010 г., 17:24
правильно, я не могу загрузить изображение, выбранное пользователем, так же просто, как оно звучит ...?
 Константин Ван15 февр. 2016 г., 21:18
Если вы хотите синхронную версию, вы можете использовать:URL.createObjectURL(document.getElementById("fileInput").files[0]);.
 Andy E28 сент. 2010 г., 17:26
@Valentine: нет, это не так просто, как вы могли надеяться. В мире веб-разработки очень мало ;-)
 senox1325 июл. 2019 г., 22:30
@valentina Хотя загрузка изображения на сервер, как только оно выбрано, может облегчить (с точки зрения программиста, конечно, не компьютера) отображение предварительного просмотра, многие пользователи могут посчитать это нарушением конфиденциальности.
 Andy E28 сент. 2010 г., 17:30
@Valentina: да. Также могут быть другие решения в виде загрузчиков файлов на основе Flash или Java, но помните, что не у всех эти компоненты установлены в их браузерах.

function preview_2(obj)
{
	if (FileReader)
	{
		var reader = new FileReader();
		reader.readAsDataURL(obj.files[0]);
		reader.onload = function (e) {
		var image=new Image();
		image.src=e.target.result;
		image.onload = function () {
			document.getElementById(outImage).src=image.src;
		};
		}
	}
	else
	{
		    // Not supported
	}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>preview photo</title>
</head>

<body>
<form>
	<input type="file" onChange="preview_2(this);"><br>
	<img id="imagenFondo" style="height: 300px;width: 300px;">
</form>
</body>
</html>

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

* (Обновление 22.04.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's data into the Image
            }
        ]]>
    </fx:Script>
</s:Application>
 Mike Morearty28 сент. 2010 г., 17:59
Я загрузил здесь исполняемое Flash-приложение, чтобы вы могли попробовать его:morearty.com/preview/FileUploadTest.html
 Mike Morearty28 сент. 2010 г., 17:50
Для пояснения, для тех, кто беспокоится о безопасности: Flash не позволяет вам получить доступ к ЛЮБОМУ локальному файлу - он только позволяет вам получить доступ к локальному файлу, на который явно и интерактивно указал пользователь. Это похоже на то, что делает HTML (он позволяет загружать любой явно указанный файл на сервер), за исключением того, что Flash также обеспечивает локальный доступ в дополнение к возможности загрузки файла.

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

Вот JavaScriptonchange слушатель событий. ТребуетсяFile объект, который был передан какevent.target.files[0], строитFileReader читать его содержимое и устанавливает новый прослушиватель событий для назначения результирующегоdata: URL к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);
}
 rashadb13 мар. 2015 г., 13:01
Отличная ссылка! Код, который вы предоставляете для сценария, не определен.

Ваш ответ на вопрос