ФОРМЫ / Загрузка изображений через форму

<label for="fileUpload" class="download-file">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="25px" height="21px" version="1.1" viewBox="0 0 6.01 5.01"><path style="fill:#764E2B" d="M6.01 5.01l-6.01 0 0 -5.01 6.01 0 0 5.01 0 0zm-0.25 -4.76l-5.51 0 0 4.5 5.51 0 0 -4.5 0 0zm-0.25 4l-4.76 0 1 -1.87 0.75 0.76 1.26 -1.89 1.75 3zm-2.97 -0.71l-0.73 -0.74 -0.64 1.2 3.9 0 -1.33 -2.28 -1.2 1.82zm-1.16 -2.79c0.34,0 0.62,0.28 0.62,0.63 0,0.34 -0.28,0.62 -0.62,0.62 -0.35,0 -0.63,-0.28 -0.63,-0.62 0,-0.35 0.28,-0.63 0.63,-0.63zm0 0.25c0.2,0 0.37,0.17 0.37,0.38 0,0.2 -0.17,0.37 -0.37,0.37 -0.21,0 -0.38,-0.17 -0.38,-0.37 0,-0.21 0.17,-0.38 0.38,-0.38z"></path></svg>
<span class="download-file-text ps-2">Выберите несколько фото</span>
</label>
<input class="photo" type="file" name="files[]" value="" size="30" placeholder="Загрузить фото" multiple="true" accept="image" id="fileUpload" accepts=".jpg, .jpeg, .png, .webp">
<div id="image-holder" class="d-flex flex-wrap"></div>

JS для размещения в XSL-шаблон HOSTCMS

<SCRIPT>
    <xsl:comment>
    <xsl:text disable-output-escaping="yes">
    <![CDATA[

    $(function() {
    $("#fileUpload").on('change', function () {
 
     //Get count of selected files
     var countFiles = $(this)[0].files.length;
     var imgPath = $(this)[0].value;
     var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
     var image_holder = $("#image-holder");
     image_holder.empty();
 
     if (extn == "png" || extn == "jpg" || extn == "jpeg" || extn == "webp") {
         if (typeof (FileReader) != "undefined") {
 
             //loop for each file selected for uploaded.
             for (var i = 0; i < countFiles; i++) {
 
                 var reader = new FileReader();
                 reader.onload = function (e) {
                     $("<img />", {
                         "src": e.target.result,
                             "class": "thumb-image"
                     }).appendTo(image_holder);
                 }
 
                 image_holder.show();
                 reader.readAsDataURL($(this)[0].files[i]);
             }
 
         } else {
             alert("Ваш брузер не поддерживает FileReader!");
         }
     } else {
         alert("Выберите файл в формате JPG, JPEG, PNG или WEBP!");
     }
    });
    });

    ]]>
    </xsl:text>
    </xsl:comment>
</SCRIPT>

Добавляем поле загрузки файла (новое поле создается после загрузки изображения)

<SCRIPT> 
    function addOneMoreInput() {
    $('input[type=file]').last().change(function() {
        $(this).after('<input type="file" name="files[]" />');
        $(this).off('change');
        addOneMoreInput();
    });
   }
   addOneMoreInput();
</SCRIPT>