#javascript #html #laravel #file #multi-select
Вопрос:
Я нашел этот пример кода на следующем веб-сайте: (https://speckyboy.com/custom-file-upload-fields / : второй пример) это дает вам возможность настроить ввод вашего файла, это действительно помогло мне, и мне очень понравилась реализованная там функция удаления изображения, поэтому я решил использовать тот же стиль для моего другого ввода нескольких файлов для загрузкинесколько фотографий одновременно, но это не сработало. Что не так с моим кодом?
function readMultiFiles(input) {
if(input.files amp;amp; input.files[0]) {
for(i = 0; i < input.files.length; i ) {
var reader = new FileReader();
reader.onload = function(e) {
$('.image-upload-wrap-Multi').hide();
$('.file-upload-image-Multi').attr('src', e.target.result);
$('.file-upload-content-Multi').show();
$('.image-title-Multi').html(input.files[0].name);
};
reader.readAsDataURL(input.files[i]);
}
} else {
for(i = 0; i < input.files.length; i ) {
removeUploadMulti();
}
}
}
function removeUploadMulti() {
$('.file-upload-input-Multi').replaceWith($('.file-upload-input-Multi').clone());
$('.file-upload-content-Multi').hide();
$('.image-upload-wrap-Multi').show();
}
$('.image-upload-wrap-Multi').bind('dragover', function() {
$('.image-upload-wrap-Multi').addClass('image-dropping');
});
$('.image-upload-wrap-Multi').bind('dragleave', function() {
$('.image-upload-wrap-Multi').removeClass('image-dropping');
});
Вот мое поле ввода:
<div class="file-upload-Multi">
<button
class="file-upload-btn-Multi"
type="button"
onclick="$('.file-upload-input-Multi').trigger( 'click' )"
>
2-Ajouter d'autres photos du produit
</button>
@if ($errors->has('fileCollection'))
<span class="text-danger">{{ $errors->first('photo') }}</span>
@endif
<div class="image-upload-wrap-Multi">
<input
type='file'
onchange="readMultiFiles(this);"
accept="image/*"
class="file-upload-input-Multi form-control @error('fileCollection') is-invalid @enderror"
name="fileCollection[]"
value="{{old('fileCollection')}}"
multiple="multiple"
nullable
/>
<div class="drag-text-Multi">
<h3>Faites glisser et déposez toutes les images de ce produit, ou sélectionnez "Ajouter une image"</h3>
</div>
</div>
<div class="file-upload-content-Multi">
<img class="file-upload-image-Multi" src="#" alt="your image" />
<div class="image-title-wrap-Multi">
<button
type="button"
onclick="removeUploadMulti()"
class="remove-image"
>
Retirer <span class="image-title-Multi">Uploaded Image</span>
</button>
</div>
</div>
</div>