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

如果要以不同的ID输出另外两张图片，还需要编辑标识这些HTML元素的JavaScript。

例如

document.getElementById('list2').insertBefore(span, null);

或

 document.getElementById('files').addEventListener

您可以将输出的新HTML元素添加到主HTML页面

 <output id="list2"></output>

Answer 2

尝试

<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

在不同的div中插入图像

2 个答案: