html - upload image with preview with javascript

Question

I found source code that i needed but i have to make it multiple upload image, how to upload image_desktop and image_mobile... please how to solve this?

javascript =

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#imagePreview').css('background-image', 'url('+e.target.result +')');
            $('#imagePreview').hide();
            $('#imagePreview').fadeIn(650);
        }
        reader.readAsDataURL(input.files[0]);
    }
}
$("#imageUpload").change(function() {
    readURL(this);
});

and this is my blade =

<div class="form-group col-lg-6 col-md-6 col-sm-12">
                <label>Gambar Struktur Desktop</label>
                <div class="avatar-upload">
                    <div class="avatar-edit">
                        <input type='file' name="image" id="imageUpload" class="form-control @if ($errors->has('image')) {{ 'is-invalid' }} @endif">
                        <label for="imageUpload"><i class="fas fa-pencil-alt text-center"></i></label>
                    </div>
                    <div class="avatar-preview">
                        <div id="imagePreview" style="background-image: url({{ asset($structure->image_desktop) }});">
                        </div>
                        @if($errors->first('image_desktop'))
                            <span class="invalid-feedback">{{ $errors->first('image_desktop') }}</span>
                        @endif
                    </div>
                </div>
            </div>
            <div class="form-group col-lg-6 col-md-6 col-sm-12">
                <label>Gambar Struktur Mobile</label>
                <div class="avatar-upload">
                    <div class="avatar-edit">
                        <input type='file' name="image" id="imageUpload2" class="form-control @if ($errors->has('image')) {{ 'is-invalid' }} @endif">
                        <label for="imageUpload2"><i class="fas fa-pencil-alt text-center"></i></label>
                    </div>
                    <div class="avatar-preview">
                        <div id="imagePreview2" style="background-image: url({{ asset($structure->image_mobile) }});">
                        </div>
                        @if($errors->first('image_mobile'))
                            <span class="invalid-feedback">{{ $errors->first('image_mobile') }}</span>
                        @endif
                    </div>
                </div>
            </div>

Answer 1

等待大神答复