私は毎回画像を表示することができますどのように入力タイプのファイルのリストを持って、それが唯一の画像を受け入れる..私は1が追加しますか？onchange方法を使用して

Esmail Elmoussel：

私はこのコードとその作業を書いたが、私は、画像を選択したときにのみ、最初の要素の前に表示されます。

<html lang="en">
<head>
    <title>Change image on select new image from file input</title>
</head>
<body>
    <ul>
        <li>
            <input type="file" accept=".png, .jpg, .jpeg" onchange="loadFile(event)">
            <img class="output" width="100px" />
        </li>
        <li>
            <input type="file" accept=".png, .jpg, .jpeg" onchange="loadFile(event)">
            <img class="output" width="100px" />
        </li>
        <li>
            <input type="file" accept=".png, .jpg, .jpeg" onchange="loadFile(event)">
            <img class="output" width="100px" />
        </li>
    </ul>

<script type="text/javascript">
    var loadFile = function(event) {
        var output = document.getElementsByClassName('output')[0];
        output.src = URL.createObjectURL(event.target.files[0]);
    };
</script>

私は、すべての画像は、その入力の前に表示します。

アディス：

あなたが最初に過負荷状態にしている<img>要素ファイルを変更するたびに。それは、より良いあなたが見つけるのです<img>目標入力要素の隣：

var loadFile = function(event) {
    var output = event.target.nextElementSibling;
    output.src = URL.createObjectURL(event.target.files[0]);
};

編集：コメントにあなたの質問のためにインクルードします

新しい作成するinputに要素をJSし、他のと同じ動作を実装input要素を、あなたが入力要素が、全体だけでなく、作成する必要がありますliだけで、既存のHTMLの構造のようにノードをし、それを追加ulでDOM。HTMLの構造が変化した場合は、その注意nextElementSibling対応を見つけるために失敗することがありimg、タグを。

<script type="text/javascript">

    var loadFile = function(event) {
        var output = event.target.nextElementSibling;
        output.src = URL.createObjectURL(event.target.files[0]);
    };

    const input = document.createElement('INPUT'); 
    input.type = 'file'; 
    input.accept = '.png, .jpg, .jpeg'; 
    input.onchange = loadFile;

    const img = document.createElement('IMG'); 
    img.width = '100';

    const li = document.createElement('LI'); 
    li.appendChild(input);
    li.appendChild(img);

    const ul = document.querySelector('ul');
    ul.appendChild(li);

</script>

私は毎回画像を表示することができますどのように入力タイプのファイルのリストを持って、それが唯一の画像を受け入れる..私は1が追加しますか？onchange方法を使用して

おすすめ