В основном 2 ошибки
imgId = '#preview-' + $(input).attr('id');
$(imgId).attr('src', e.target.result);
Сначала вы пытаетесь присвоить атрибут src для label, а не для тега img, <label class="upload-image" for="img1" id="preview-img1">. Вы должны добавить тег <img> внутри каждой метки после ввода, а затем назначить src этому изображению id, который вы присвоили метке, присваивает его изображению <img class="upload-image" id="preview-img1" src="" />.
Тогда вы выбираете неправильную форму form#mainform и неправильный элемент div.upload-image
$("form#mainform div.upload-image input[type='file']")
должно быть как показано ниже после предложенных изменений
$("form#mainpost label input[type='file']")
затем вы выбираете id для обнаружения элемента предварительного просмотра imgId = '#preview-' + $(input).attr('id');, тогда как вы должны выбрать атрибут name, чтобы соответствующий предварительный просмотр отображался на входе, см. Eblow, я создал демо
function readURL(input) {
//console.log('here', input);
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
imgId = '#preview-' + $(input).attr('name');
//console.log(imgId)
$(imgId).attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
$("form#mainpost label input[type='file']").on('change', function() {
readURL(this);
});
img.upload-image {
max-width: 100px;
max-height: 100px;
overflow: hidden;
}
label {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" id="mainpost">
<fieldset>
<div class="section postdetails">
<div class="row form-group add-image">
<label class="col-sm-3 label-title">Photos for your ad <span>(This will be your cover photo )</span> </label>
<div class="col-sm-9">
<h5><i class="flaticon-upload" aria-hidden="true"></i>Select Files to Upload<span>You can add multiple images.</span></h5>
<div class="upload-section">
<label for="img1">
<input type="file" name="img1" id="upload-image-one"><img class="upload-image" id="preview-img1" src="" />
</label>
<label for="img2">
<input type="file" name="img2" id="upload-image-two"><img class="upload-image" id="preview-img2"/>
</label>
<label classfor="img3">
<input type="file" name="img3" id="upload-image-three" ><img class="upload-image" id="preview-img3"/>
</label>
<label for="img4">
<input type="file" name="img4" id="upload-image-four"><img id="preview-img4" class="upload-image" id="preview-img4"/>
</label>
</div>
</div>
</div>
</div>
<!-- section -->
</fieldset>
</form>
<!-- form -->
EDIT
, так как вы не хотите или не можете изменить html, вы должны вручную создать элемент изображения и вставить его внутри метки
function readURL(input) {
//console.log('here', input);
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
imgId = '#preview-' + $(input).attr('name');
let img = document.createElement('img');
img.setAttribute('src', e.target.result);
img.setAttribute('class', 'img-preview');
document.querySelector(imgId).appendChild(img);
//console.log(imgId)
//$(imgId).append('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
$("form#mainpost label input[type='file']").on('change', function() {
readURL(this);
});
img.img-preview {
max-width: 100px;
max-height: 100px;
overflow: hidden;
}
label {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" id="mainpost">
<fieldset>
<div class="section postdetails">
<div class="row form-group add-image">
<label class="col-sm-3 label-title">Photos for your ad <span>(This will be your cover photo )</span> </label>
<div class="col-sm-9">
<h5><i class="flaticon-upload" aria-hidden="true"></i>Select Files to Upload<span>You can add multiple images.</span></h5>
<div class="upload-section">
<label class="upload-image" for="img1" id="preview-img1">
<input type="file" name="img1" id="img1">
</label>
<label class="upload-image" for="img2" id="preview-img2">
<input type="file" name="img2" id="upload-image-two">
</label>
<label class="upload-image" for="img3" id="preview-img3">
<input type="file" name="img3" id="upload-image-three" >
</label>
<label class="upload-image" for="img4" id="preview-img4">
<input type="file" name="img4" id="upload-imagefour">
</label>
</div>
</div>
</div>
</div>
<!-- section -->
</fieldset>
</form>
<!-- form -->