Question

我创建了一个上传图像的功能，但是我无法查看这些图像... 我的问题：单击按钮选择图像时，我选择了图像，并希望将其填满整个框。

图片1说明了问题（图片填充了整个边框）

问题2：当我选择一张以上的图像时，它们都在巨型框中排成一行……目标是要在大框中填充1张图像，而在小框中填充其余图像。图片2说明了这个问题。

在下面的这张图中，我更好地说明了我的意图。

请有人帮助我！

JavaScript

var drop = $("input");
    drop.on('dragenter', function (e) {
      $(".drop").css({
        "border": "4px dashed #09f",
        "background": "rgba(0, 153, 255, .05)"
      });
      $(".cont").css({
        "color": "#09f"
      });
    }).on('dragleave dragend mouseout drop', function (e) {
      $(".drop").css({
        "border": "3px dashed #DADFE3",
        "background": "transparent"
      });
      $(".cont").css({
        "color": "#8E99A5"
      });
    });



    function handleFileSelect(evt) {
      var files = evt.target.files; // FileList object

      // Loop through the FileList and render image files as thumbnails.
      for (var i = 0, f; f = files[i]; i++) {

        // Only process image files.
        if (!f.type.match('image.*')) {
          continue;
        }

        var reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function (theFile) {
          return function (e) {
            // Render thumbnail.

            var span = document.createElement('span');
            span.innerHTML = ['<img class="thumbs" src="', e.target.result,
              '" title="', escape(theFile.name), '"/>'].join('');
            document.getElementById('list').insertBefore(span, null);
          };
        })(f);

        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
      }
    }

    $('#files').change(handleFileSelect);

Answer 1

请查看此Codepen方法。

希望您喜欢它，如果您对JS不了解，请告诉我是否要使其完整。我很快就做到了

您需要添加以下内容：

 <div class="Upcard">
          <div class="card-block" id="2">
          </div>
 </div>

CSS：

/* Images Module */
img {
    /* bootstrap was overalaping this feature */
    width: 100% !important;
}

.card-block> img {
    height: 100% !important;
}

JS修改：

var enter = false;

 reader.onload = (function (theFile) {
            return function (e) {
                // Render thumbnail.
                if (!enter) {
                    var list = document.getElementById('list');
                    list.innerHTML = ['<img class="thumbs" src="', e.target.result,
                        '" title="', escape(theFile.name), '"/>'].join('');
                    enter = true;
                } else {
                    // you need to loop here, Im sorry I do not remember the looping thing, but this is the approach... 
                    var card = document.getElementById('2');
                    card.innerHTML = ['<img class="thumbs" src="', e.target.result,
                        '" title="', escape(theFile.name), '"/>'].join('');
                }

            };
        })(f);

https://codepen.io/MarchWhitetower/pen/yLLMerV

今天晚些时候，我将结束此解决方案。

上传图片并显示预览

1 个答案: