<入力ファイル>から<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値があります。

ただし、onloadは発生せず、htmlには何もロードされないようです。

私は何をすべきか？

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's session ends.
    }
}

ブラウザのサポート

• IE 10
• Safari 6.0.2
• Chrome 7
• Firefox 3.6
• Opera 12.02

File APIがサポートされていない場合、（ほとんどのセキュリティ意識の高いブラウザーでは）ファイル入力ボックスからファイルのフルパスを取得することも、データにアクセスすることもできません。実行可能な唯一の解決策は、フォームを非表示のiframeに送信し、ファイルをサーバーに事前にアップロードすることです。次に、そのリクエストが完了したら、画像のsrcをアップロードされたファイルの場所に設定できます。

iEaminが彼の答えで言ったように、HTML5は現在これをサポートしています。彼が提供したリンクhttp://www.html5rocks.com/en/tutorials/file/dndfiles/は素晴らしいです。これはそのサイトのサンプルに基づく最小限のサンプルですが、より完全な例についてはそのサイトを参照してください。

onchangeHTMLにイベントリスナーを追加します。

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

IDを使用して画像タグheight=200を作成します（画面上で画像が大きすぎないことを確認するために指定しています）：

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

これがonchangeイベントリスナーのJavaScriptです。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);
}

$('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で私のために働きます。

ES2017ウェイ

// convert file to a base64 url
const readURL = file => {
    return new Promise((res, rej) => {
        const reader = new FileReader();
        reader.onload = e => res(e.target.result);
        reader.onerror = e => rej(e);
        reader.readAsDataURL(file);
    });
};

// for demo
const fileInput = document.createElement('input');
fileInput.type = 'file';
const img = document.createElement('img');
img.attributeStyleMap.set('max-width', '320px');
document.body.appendChild(fileInput);
document.body.appendChild(img);

const preview = async event => {
    const file = event.target.files[0];
    const url = await readURL(file);
    img.src = url;
};

fileInput.addEventListener('change', preview);

Andy Eは、これを行うためのHTMLベースの方法がないことは正しいです*。ただし、Flashを使用する場合は、使用できます。以下は、Flashがインストールされているシステムで確実に機能します。アプリがiPhoneで動作する必要がある場合は、もちろん、フォールバックHTMLベースのソリューションが必要になります。

*（2013年4月22日更新： HTMLはHTML5でこれをサポートするようになりました。他の回答を参照してください。）

Flashアップロードには、他にも利点があります。Flashを使用すると、大きなファイルのアップロードが進行するときに進行状況バーを表示できます。（私はそれについて間違っているかもしれませんが、舞台裏でFlashを使用することにより、Gmailがそれを行う方法であると確信しています。）

これは、ユーザーがファイルを選択して表示できるFlex4アプリのサンプルです。

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