javascript - html中的图像预览错误

Question

我正在使用以下代码在输入框中显示图像它工作正常，我使用单个输入框使用multiple上传多个并且工作正常

我只需要上传 5 张图片，所以如果超过 5 张图片，我使用 break 语句停止上传过程

代码

function handleFileSelect(evt) {
                var files = evt.target.files;
                for (var i = 0, f; f = files[i]; i++) {
                    if (!f.type.match('image.*')) {
                        continue;
                    }
                    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('list').insertBefore(span, null);
                        };
                    })(f);
                    reader.readAsDataURL(f);
                }
            }
            document.getElementById('files').addEventListener('change', handleFileSelect, false);

以上代码显示图片预览

jsfiddle

错误

• 如果用户添加超过 5 张图片我只需要显示 5 张图片
• 如果我第一次选择 3 张图片，如果我选择 5 张图片，则在同一个输入框中显示这 5 张图片和前 3 张图片，但未上传前 3 张图片 所以我只需要在同行中显示图片列表

Answer 1

您需要在循环中添加一个长度 AND i<5。

for (var i = 0; i<files.length && i<5; i++) {
    var f = files[i];

如果您认为文件类型是个问题，您可以随时使用第二个计数器

var imgCount = 0;
for (var i = 0; i<files.length && imgCount<5; i++) {
   var f = files[i];
   if (!f.type.match('image.*')) {
       continue;
   }
   imgCount++;

对于您的其他问题，您需要在开始添加图像时清除输出区域。

document.getElementById('list').innerHTML = "";
for (var i = 0; i<files.length && i<5; i++) {
    var f = files[i];

---

function handleFileSelect(evt) {
    var files = evt.target.files;
    var listOut = document.getElementById('list');
    listOut.innerHTML = "";
    for (var i = 0; i < files.length && i < 5; i++) {
        var f = files[i];
        if (!f.type.match('image.*')) {
            continue;
        }
        var reader = new FileReader();
        reader.onload = (function (theFile) {
            return function (e) {
                var span = document.createElement('span');
                var img = document.createElement('img');
                img.className = "thumb";
                img.src = e.target.result;
                img.title = theFile.name;
                span.appendChild(img);
                listOut.appendChild(span);
            };
        })(f);
        reader.readAsDataURL(f);
    }
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);