Question

我正在尝试做什么：

1 - 如何使用第二个文件输入来设置一类div的背景图像，在这种情况下是类.logo ？（目前，我有一个文件输入，即设置类.background 的背景图像，但我需要添加第二个文件输入）

2 - 我如何包含一个链接，该链接将“删除”或“废弃”通过文件输入选择的文件，以便将一类div重置为没有背景图像？

以下是我到目前为止尝试解决此问题的方法：

我尝试添加第二个按钮，然后复制JS然后更改类名，但这会破坏所有内容。所以我在这里为文件输入提供了两个按钮。此外，我试图搜索上传后如何删除文件输入，但我无法理解我找到的任何内容。我通读了this question about clearing a form，但我无法成功应用所描述的内容。

这是我到目前为止所尝试的内容：

$('.verborgen_file').hide();
$('.uploadButton').on('click', function() {
  $('.verborgen_file').click();
});

$('.verborgen_file').change(function() {
  var file = this.files[0];
  var reader = new FileReader();
  reader.onloadend = function() {
    $('.background').css('background-image', 'url("' + reader.result + '")');
  }
  if (file) {
    reader.readAsDataURL(file);
  } else {}
});

.background {
  background-image: url("");
  background-position: center;
  width: 100%;
  border: 0px dashed #ddd;
  background-color: #fbfbfb;
  padding: 10px;
}

.background:hover {
  cursor: move;
}

div.bg-img {
  background-position: center;
  background-repeat: no-repeat;
}

.responsive {
  background-image: url("");
  background-size: 120%;
  background-position: center;
  min-height: 20vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.medium {
  background-image: url("");
  background-size: cover;
  background-position: center;
  height: 150px;
  width: 100%;
  margin-top: 15px;
  margin-bottom: 15px;
  position: relative;
}

.logo {
  height: 50px;
  width: 80px;
  background-color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputSection">
<h1>Input Section</h1>
Background:
<input type='file' class='verborgen_file' />
<input type="button" value="Upload" class="uploadButton" />
<a href="">delete</a>
<br> Logo:
<input type="button" value="Upload" class="uploadButton" /><a href="">delete</a>
</div>

<br>
<div class="imageSection">
<h1>Divs with Images Section</h1>
<div class="background responsive bg-img">
  <div class="logo">
  </div>

</div>

<div class="background medium bg-img">
  <div class="logo">
  </div>
</div>
</div>

Answer 1

根据我的经验，我建议将输入选择的文件放在数组中以便进一步工作。

但在你的情况下，这很简单。（但是，HTML结构使这个问题变得更复杂。）

我在HTML中添加了一些input，并将一些数据属性添加到<input>和<a>。

并且，请参阅以下评论......

修改：由于您将它们分开并放入另一个div，因此parent()将是div。我们的目标是寻找包含div和inputSection的{{1}}，因此请将imageSection替换为parent()。那就是它！

＆＃13;

parents('.container')

＆＃13;

$('.verborgen_file').hide();

$('.uploadButton').on('click', function() {
  // find relative input and trigger click event
  var id = $(this).data('id')
  var target = $(this).siblings('input[data-id=' + id + ']')
  target.click();
});

$('.verborgen_file').change(function() {
  var $this = $(this)
  var file = this.files[0];
  var id = $(this).data('id')

  var reader = new FileReader();
  reader.onload = function() {
    // find either .background or .logo class in container and change the image
    $('body').find('div[data-id='+ id +']').css('background-image', 'url("' + reader.result + '")');
  }
  if (file) {
    reader.readAsDataURL(file);
  } else {
    // if file doesn't exist, clear the image
    $('body').find('div[data-id='+ id +']').css('background-image', '');
  }
});

$('a').on('click', function(e) {
  e.preventDefault()
  var $this = $(this)
  var id = $this.data('id')
  var inputID = $this.siblings('input[data-id=' + id + ']').attr('id')
  // clear the relative input and trigger change event
  $('#' + inputID).val('').trigger('change')
})

＆＃13;

.background {
  background-image: url("");
  background-position: center;
  width: 100%;
  border: 0px dashed #ddd;
  background-color: #fbfbfb;
  padding: 10px;
}

.background:hover {
  cursor: move;
}

div.bg-img {
  background-position: center;
  background-repeat: no-repeat;
}

.responsive {
  background-image: url("");
  background-size: 120%;
  background-position: center;
  min-height: 20vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.medium {
  background-image: url("");
  background-size: cover;
  background-position: center;
  height: 150px;
  width: 100%;
  margin-top: 15px;
  margin-bottom: 15px;
  position: relative;
}

.logo {
  height: 50px;
  width: 80px;
  background-color: #eee;
}

＆＃13;

使用多个文件输入来设置多个div的背景图像

1 个答案: