javascript - 在不同的 div 中插入图像

Question

简而言之，用户可以从他们的设备图库中选择一个图像，并在提交后将图像显示在屏幕上，并以 ID"file"输出。当用户选择另一张图片时，另一张会显示在它旁边，直到计数器达到 3。

我想具体说明另外两张图片的放置位置。因此，我认为 image1 会与

<br><output id="list"></output>,
image 2 <br><output id="list2"></output>, etc

我试图调整代码，但我的尝试失败了。下面是我发现的代码，它允许您从设备中选择一张图片并在屏幕上输出，但我的问题是我想以不同的 ID 输出另外两张图片。

http://jsfiddle.net/3D6pd/13/

如有任何帮助，我们将不胜感激。

Answer 1

尝试

<input type="file" id="files" name="image_file_arr[]" multiple>
<br>
<output id="img1"></output>
<br>
<output id="img2"></output>
<br>
<output id="img3"></output>
<br>
<output id="img4"></output>

然后

function handleFileSelect(evt) {
    var $fileUpload = $("input#files[type='file']");
    if (this.files.length > 4) {
        alert("You can only upload a maximum of 5 files");
        evt.preventDefault();
        evt.stopPropagation();
        return false;
    }
    var files = this.files;
    for (var i = 0, f; f = files[i]; i++) {
            if (!f.type.match('image.*')) {
                continue;
            }
        (function(i){
            var reader = new FileReader();

            reader.onload = (function (theFile) {
                return function (e) {
                    var span = document.createElement('span');
                    span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
                    document.getElementById('img' + (i + 1)).appendChild(span);
                };
            })(f);

            reader.readAsDataURL(f);
        })(i);
    }
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);

演示:Fiddle