Question

我有一个图片上传面板。我可以上传和多个图像。当我选择图像时，它会显示在其他面板中（图像预览）。但我的问题是，一张图片的工作量不超过一张。这是我的代码。这是上传的形式。

@using (Html.BeginForm("Upload", "ImageAdvertisement", FormMethod.Post, new { enctype = "multipart/form-data" })){
    @Html.AntiForgeryToken();

    <h4><label><b><i>@GoOnWork.Resource.ChooseImage</i></b></label></h4>
    <input type="file" multiple="multiple" class="jfilestyle" name="file" id="file" style="width: 100%;margin: 0 auto;" data-buttontext="><span class='glyphicon glyphicon-folder-open'></span> Choose File"; />
    <input type="hidden" value="@Model" name="advertisementId" />
    <br>
    <br>
    <button type="submit" class="btn btn-default" style="width:250px;"><span class="glyphicon glyphicon-upload"></span> @GoOnWork.Resource.Upload</button>
}

这是我上传之前显示图像的面板。

<div class="col-md-7 hidden" id="showImg">
    <div class="panel panel-default">
        <div class="panel-heading text-center"><b><i>@GoOnWork.Resource.ImagePreview</i></b></div>
        <div class="panel-body text-center">
            <img id="myImg" src="#" alt="your image" class="img-rounded" width="400" height="360" border="0" />
        </div>
    </div>
</div>

这是我的JQuery部分代码。

<script type="text/javascript">
    $(function () {
        $(":file").change(function () {
            if (this.files && this.files[0]) {
                var reader = new FileReader();
                reader.onload = imageIsLoaded;
                reader.readAsDataURL(this.files[0]);
            }
        });
    });

    function imageIsLoaded(e) {
        $('#myImg').attr('src', e.target.result);
        $('#showImg').removeClass("hidden");
    };
</script>

Answer 1

在您的javascript中，您始终使用ID“myImg”引用相同的img标记。除了id应该是唯一的，这意味着你总是选择相同的元素（即使有几个具有相同id的元素）并更改其源属性。

重写您的HTML和JS，以便每个添加的图像在图像上都有自己的ID。或者您可以重新编写imageIsLoaded函数，以便为每个图像生成新的HTML块

Answer 2

您可以预览多个图像，如下所示。迭代文件上传的每个图像，用它创建<img>，然后追加到DOM。

＆＃13;

$('input[type="file"]').change(function() {
  $('.preview').html('');
  $.each(this.files, function() {
    readURL(this);
  })
});

function readURL(file) {
  var reader = new FileReader();
  reader.onload = function(e) {
    $('.preview').append('<img src=' + e.target.result + ' style="width: 100px; height: 120px;"/>');
  }

  reader.readAsDataURL(file);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" multiple/>
<div class="preview"></div>

＆＃13;

使用预览上传图像

2 个答案: