<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);
});
}
}
问题在于,当我选择图像时,它会重复两次。