Javascript html中的图像预览出错

我使用以下代码在

输入框中显示图像

效果很好，我使用单个输入框使用

多个

上传多个图像，效果很好

我只需要上传5张图片，所以如果超过5张图片，我会使用

break

语句停止上传过程

密码

功能手柄文件选择（evt）{
var files=evt.target.files；
for（var i=0，f；f=files[i]；i++）{
如果（！f.type.match（'image.*'））{
持续
}
var reader=new FileReader（）；
reader.onload=（函数（文件）{
返回函数（e）{
var span=document.createElement（'span'）；
span.innerHTML=[''）.join（''）；
document.getElementById（'list'）.insertBefore（span，null）；
};
})（f） )；
reader.readAsDataURL（f）；
}
}
document.getElementById（'files'）.addEventListener（'change'，handleFileSelect，false）；

以上代码显示图像预览

错误

• 如果用户添加的图像超过5张，我只需要显示5张图像
• 如果我第一次选择3个图像，并且在同一输入框中选择5个图像，则会显示这5个图像和前3个图像，但前3个图像未上载，因此我需要仅显示对等列表中的图像

---

您需要添加一个长度，我在这里添加了我尝试的广告长度

f=files[4]如果用户单击添加图像，如何清除输出？您能帮助我如果用户第二次添加图像，如何清除输出？我没有发现任何错误，也没有预览。您能添加完整代码（修改我的问题并作为答案发布）啊，您使用的是insertBefore，这不会将其添加到元素中。那么解决方案是什么呢？？？先生
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);

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