在预览中,每个图像重复两次

时间:2017-11-11 14:50:40

标签: javascript jquery html5

<template class="img-template">
<div class="img-container">
    <img src="" />
    <a class="remove-img"><i class="material-icons">close</i></a>
</div>

<div>
    <label>Image</label>
</div>
<input id="photoInput" class="imgSelector" type="file" accept="image/jpeg, image/jpg" data-preview="previewPhoto" data-multiple="true">
<div id="previewPhoto" class="imgPreview" data-model-prop="PhotosJson"></div>
<input hidden asp-for="PhotosJson" />

我有3个元素:用于选择图像的input元素,用于图像预览的div和用于存储序列化数组的隐藏input包含所有元素的字符串(basse64)本部分中的图像。
Jquery的:
documentReady

$('.imgSelector').on('change', previewPhotoInputAndFill);

功能体是:

   function previewPhotoInputAndFill() {
        var $currentInput = $(this);
        var previewSelector = $currentInput.data('preview');
        var $preview = $('#' + previewSelector);

         if (this.files) {
            var files = this.files;
            $.each(files, function (i, file) {
                var size = (file.size) / 1000;
                if (size > 100) {
                    return alert("err msg!");
                }
                if (!/\.(jpeg|jpg)$/i.test(file.name)) {
                    return alert("err msg!");
                }
                var reader = new FileReader();
                $(reader).on("load", function () {
                    var imgSource = this.result;
                    var isMultiple = $currentInput.data('multiple');
                    if (isMultiple === true) {
                        $preview.append($('.img-template').html());
                    } else {
                        $preview.html($('.img-template').html());
                    }
                    var $lastDiv = $preview.find(".img-container:last");
                    $lastDiv.find('img').attr('src', imgSource);
                    var imgSources = [];
                    $preview.find('img').each(function (index, element) {
                        imgSources.push($(element).attr('src').split(',')[1]);
                    });
                    var modelProp = $preview.data('model-prop');
                    var $modelProp = $('#' + modelProp);
                    $modelProp.val(JSON.stringify(imgSources));
                });
                reader.readAsDataURL(file);
            });
        }
    }

问题在于,当我选择图像时,它会重复两次。

0 个答案:

没有答案