1 回答

TA貢獻(xiàn)2080條經(jīng)驗(yàn) 獲得超4個(gè)贊
在你的代碼中this
引用輸入,所以你需要找到最近的?.file-upload
父母,你可以使用父母但你需要保持那個(gè)結(jié)構(gòu)(我更喜歡最近)
不要在 for-loop 中添加事件,因?yàn)槿绻x擇 3 個(gè)文件,您的第一個(gè)文件remove element
將有 3 個(gè)點(diǎn)擊事件,第二個(gè)有 2 個(gè),最后一個(gè)有一個(gè)
$(document).on("change", ".files", function (e) {
? ? var files = e.target.files,
? ? ? ? ? ? filesLength = files.length;
? ? //this reffer's to <input type="file" class="files" .. so you need to get closest parent .file-upload
? ? let div = $(this).closest(".file-upload");
? ? $(div).find('.pip').remove();
? ? for (var i = 0; i < filesLength; i++) {
? ? ? ? var f = files[i]
? ? ? ? var fileReader = new FileReader();
? ? ? ? fileReader.onload = (function (e) {
? ? ? ? ? ? var file = e.target;
? ? ? ? ? ? $("<span class=\"pip\">" +
? ? ? ? ? ? ? ? ? ? "<img class=\"imageThumb\" src=\"" + e.target.result + "\">" +
? ? ? ? ? ? ? ? ? ? "<br/><span class=\"remove\"><i class='fa fa-times-circle'></i></span>" +
? ? ? ? ? ? ? ? ? ? "</span>").insertAfter($(div));
? ? ? ? });
? ? ? ? fileReader.readAsDataURL(f);
? ? }
? ? $(div).find(".remove").click(function () {
? ? ? ? $(this).parent(".pip").remove();
? ? });
});
img {
? ? max-width: 80px;
? ? max-height: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="medi">
? ? <div class="file-upload">
? ? ? ? <input type="file" class="files" name="images[]" multiple="">
? ? ? ? <img src="/upload.png" style="position: relative;top: 11px;height: 16px;width: 16px;margin-left: 8px;">
? ? ? ? <span class="upload-text">Upload</span>
? ? </div>
</div>
添加回答
舉報(bào)