html 中的图像预览中出错

ERROR in image preview in html

本文关键字：出错 图像 html      更新时间：2023-09-26

我使用以下代码显示图像，input box它工作正常，我使用单个输入框上传多个输入框使用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);

上面的代码显示图像预览

斯菲德尔

错误

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

您需要在循环中添加长度和 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++;

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

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);
相关文章：