Загрузка изображения из

как сказал 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 чтобы прочитать его содержимое и настроить новый прослушиватель событий для назначения результирующего data: URL to the 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);
}

$('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">

//вот работа для меня в jquery

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's data into the Image
            }
        ]]>
    </fx:Script>
</s:Application>

var outImage ="imagenFondo";
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>