Question

我正在尝试制作它，以便您可以将多张照片上传到本地存储区，每个产品都有自己的上传输入。（目前仅适用于产品1）。

我尝试过复制jQuery代码并更改变量但无法使其工作。

有人能引导我朝正确的方向前进吗？

由于

图片:(注意它在产品1上显示图像，但不在产品2上显示。）

HTML：

ObjectProperty<Character> letter = new SimpleObjectProperty<>('L');
btnred.setOnAction(evt -> {
    char newLetter = (char) (letter.get() - 1);

    // just checking for demonstration
    // disable binding should prevent the action from triggering
    // when the following condition is false
    if (newLetter >= 'A') {
        letter.set(newLetter);
    }
});
btngreen.setOnAction(evt -> {
    char newLetter = (char) (letter.get() + 1);

    // just checking for demonstration
    // disable binding should prevent the action from triggering
    // when the following condition is false
    if (newLetter <= 'Z') {
        letter.set(newLetter);
    }
});

text.textProperty().bind(letter.asString());
btnred.disableProperty().bind(letter.isEqualTo('A'));
btngreen.disableProperty().bind(letter.isEqualTo('Z'));

jQuery的：

   <div class="form-group">
    <label for="name">Product 1</label>
    <div class="input-group">
        <input type="text" id="title1" class="form-control editField" readonly>
        <input type="text" id="description1" class="form-control editField" readonly>
        <input type="file" id="upload1" class="btn btn-default btn-file form-control editField" disabled="disabled" readonly>
        <div class="image1"></div>
    </div>
</div>

<div class="form-group">
    <label for="name">Product 2</label>
    <div class="input-group">
        <input type="text" id="title2" class="form-control editField" readonly>
        <input type="text" id="description2" class="form-control editField" readonly>
        <input type="file" id="upload2" class="btn btn-default btn-file form-control editField" disabled="disabled" readonly>
        <div class="image2"></div>
</div>

<div class="form-group">
    <label for="name">Product 3</label>
    <div class="input-group">
        <input type="text" id="title3" class="form-control editField" readonly>
        <input type="text" id="description3" class="form-control editField" readonly>
        <input type="file" id="upload3" class="btn btn-default btn-file form-control editField" disabled="disabled" readonly>
        <div class="image3"></div>
</div>

Answer 1

它确实适用于第一个产品，但我无法使用多个文件输入

要解决此问题，您需要对逻辑进行泛化。您可以从使用公共类开始识别文件输入以及图像应显示的相关div元素。

然后，您需要将图像存储在一个数组中。由于localStorage仅允许保存字符串值，因此您需要序列化此数组。 JSON非常适合这种情况。

最后，您可以将显示图像的逻辑从localStorage提取到可以在加载时调用的函数，以及设置新图像时。试试这个：

Example Fiddle - 请注意，此示例仅适用于小提琴，因为SO对片段中的localStorage访问限制。

$(document).ready(function() {
  showImages();

  $("body").on("change", ".file-upload", function() {
    var $input = $(this);
    var file = $input[0].files[0];

    var reader = new FileReader();
    reader.onload = function() {
      var images = JSON.parse(localStorage.getItem('images')) || [];
      images[$input.index('.file-upload')] = reader.result;
      localStorage.setItem('images', JSON.stringify(images));
      showImages(images);
    }
    reader.readAsDataURL(file);
  });
});

function showImages(content) {
  $('.image').empty();
  var images = content || JSON.parse(localStorage.getItem('images')) || [];
  images.forEach(function(image, i) {
    $('<img />').prop('src', image).appendTo($('.image').eq(i));
  })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="form-group">
  <label for="name">Product 1</label>
  <div class="input-group">
    <input type="text" id="title1" class="form-control editField" readonly>
    <input type="text" id="description1" class="form-control editField" readonly>
    <input type="file" id="upload1" class="btn btn-default btn-file form-control editField file-upload" readonly>
    <div class="image"></div>
    <img src="" id="tableBanner" />
  </div>
</div>

<div class="form-group">
  <label for="name">Product 2</label>
  <div class="input-group">
    <input type="text" id="title2" class="form-control editField" readonly>
    <input type="text" id="description2" class="form-control editField" readonly>
    <input type="file" id="upload2" class="btn btn-default btn-file form-control editField file-upload" readonly>
    <div class="image"></div>
  </div>
</div>

<div class="form-group">
  <label for="name">Product 3</label>
  <div class="input-group">
    <input type="text" id="title3" class="form-control editField" readonly>
    <input type="text" id="description3" class="form-control editField" readonly>
    <input type="file" id="upload3" class="btn btn-default btn-file form-control editField file-upload" readonly>
    <div class="image"></div>
  </div>
</div>

在localstorage中上传/显示多个文件

1 个答案: