首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Jquery FileReader输入缩略图中显示的多个图像

Jquery FileReader输入缩略图中显示的多个图像
EN

Stack Overflow用户
提问于 2018-08-05 04:09:37
回答 1查看 178关注 0票数 0

我有图像的文件输入,接受多个。此外,我有引导旋转木马之前,上传它的小演示。问题是:我有多个图像,所以我有多个img src代码。但是jquery只给了我一次使用fileReader的预览。我怎么才能让它成为可能呢?请帮帮我。

jsfiddle https://jsfiddle.net/6gsybxd9/1/

下面是我的代码:

<div class="form-group">
    <label>Img (.png/ .gif/ .jpeg):</label>
    <input type="file" multiple="multiple" accept="image/x-png,image/gif,image/jpeg" / id="imgfiles">
</div>


<div class="box thumbnail col-md-2 col-xs-3" style="border-radius:0px">

    <div id="carousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators"  style="margin-bottom:-15px">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
      </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="http://via.placeholder.com/250x250" id="item_1">
        </div>

        <div class="item">
          <img src="http://via.placeholder.com/250x250" id="item_2">
        </div>

        <div class="item">
          <img src="http://via.placeholder.com/250x250" id="item_3">
        </div>
    </div>

</div> 

和Jquery代码:

<script>

function readURL(input) {

  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#item_1').attr('src', e.target.result); //First img
      $('#item_2').attr('src', e.target.result); // Second img
      $('#item_3').attr('src', e.target.result); // Third img
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#imgfiles").change(function() {
  readURL(this);
});

</script>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-05 05:20:50

如果用户添加了4张、5张或10张图片怎么办?

您必须相应地更新您的旋转木马:

function readURL(input) {

  if (input.files && input.files[0]) {
    var container = $('.carousel-inner').html(''),
      indicators = $('.carousel-indicators').html('');

    for (var f of input.files) {
      var reader = new FileReader();
      reader.onload = function(e) {
        var n = container.children().length;
        container.append(
          `<div class="item ${n ? '' : 'active'}">
            <img src="${e.target.result}">
          </div>`
        );
        indicators.append(
          `<li data-target="#carousel" data-slide-to="${n}" class="${n ? '' : 'active'}"></li>`
        );
      }
      reader.readAsDataURL(f);
    }

  }
}

$("#imgfiles").change(function() {
  readURL(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-group">
  <label>Img (.png/ .gif/ .jpeg):</label>
  <input type="file" multiple="multiple" accept="image/*" / id="imgfiles">
</div>

<div class="thumbnail col-md-2 col-xs-3" style="border-radius:0px">

  <div id="carousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators" style="margin-bottom:-15px">
      <li data-target="#carousel" data-slide-to="0" class="active"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://via.placeholder.com/250x250" id="item_1">
      </div>
    </div>

  </div>
</div>

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51689212

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档