javascript - 上传多张图片预览

Question

我正在使用这个来源:http://opoloo.github.io/jquery_upload_preview/ 到目前为止，我可以上传一张带有预览的图像。

<style type="text/css">
.image-preview {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
  background-color: #000000;
  color: #ecf0f1;
}
input[type="file"] {
    line-height: 200px;
    font-size: 200px;
    position: absolute;
    opacity: 0;
    z-index: 10;
}
  label {
    position: absolute;
    z-index: 5;
    opacity: 0.7;
    cursor: pointer;
    background-color: #bdc3c7;
    width: 200px;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    text-transform: uppercase;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
  }

</style>

<script type="text/javascript">
$(document).ready(function() {

    $("image-preview").each(
        function(){
                $.uploadPreview({
                    input_field: $(this).find(".image-upload"),
                    preview_box: this,
                    label_field: $(this).find(".image-label")
                });
        }
    );
});
</script>
<!--| catatan penting: yang penting action="" & input type="file" name="image" |-->
<form action="upload.php" method="POST" enctype="multipart/form-data">
    <div class="image-preview">
        <label for="image-upload" class="image-label">+ GAMBAR</label>
        <input type="file" name="my_field[]" class="image-upload" />
    </div>
    <div class="image-preview">
        <label for="image-upload" class="image-label">+ GAMBAR</label>
        <input type="file" name="my_field[]" class="image-upload" />
    </div>
    <input type="submit"/>
</form>

然后尝试添加更多 div 类图像预览，我想添加另一个带有图像预览的按钮。 我不想一键多次上传。

$(document).ready(function() {$.uploadPreview => 使用id，当然当更改为class并添加更多div时，当上传一个按钮时，另一个按钮会发生变化。我对逻辑感到困惑。任何人都可以帮忙吗？也许使用数组，但我不知道如何..

Answer 1

由于上传按钮取决于 uploadPreview 的状态，因此您需要分别初始化每个 div 以获得单独的上传按钮。 像这样更改你的 html 给每个容器一个类，比如 imgBox

<div class="imgBox">
 <label for="image-upload" class="image-label">Choose File</label>
 <input type="file" name="image" class="image-upload" />
</div>
.....
....
...
<div class="imgBox">
 <label for="image-upload" class="image-label">Choose File</label>
 <input type="file" name="image" class="image-upload" />
</div>

.. 现在使用 jquery each()

初始化每一个

 $(".imgBox").each(
            function(){
                $.uploadPreview({
                input_field: $(this).find(".image-upload"),
                preview_box: this,
                label_field: $(this).find(".image-label")
            });
});