在html中的图像预览中出现错误

Question

使用以下代码在input box中显示图片时效果很好，我使用单个输入框使用multiple上传多个并且工作正常

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

CODE

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＆lt; 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);