Fine-Uploader - отображение заполнителя "ожидающее изображение" при инициализации

Я пытаюсь показать заполнитель до того, как пользователь нажмет кнопку загрузки изображения.

Я не использую функции перетаскивания, поскольку это не подходит для динамической формы, которую мне нужно заполнить конечным пользователям, поэтому все, что у меня есть, - это кнопка загрузки (в данном случае значок камеры), размещенная в строке в Форма рядом с описанием того, что мне нужно, чтобы пользователь сфотографировал. Когда фотография сделана, миниатюра отображается как обычно, снова в строке.

Мне нужно, чтобы при первом открытии формы там был заполнитель "в ожидании изображения". Обратите внимание, что я могу показать соответствующие заполнители ПОСЛЕ действий пользователя, но не раньше - что мне не хватает??

код шаблона

<script type="text/template" id="qq-parts-template">
<div class="qq-uploader-selector" >
<div class="partsupload">
    <div class="partsicons">
        <div class="qq-upload-button-selector"><i class="fa fa-camera fa-fw" aria-hidden="true"></i></div>
    </div>
    <ul class="qq-upload-list-selector qq-upload-list" style="display:inline-block;"  aria-live="polite" aria-relevant="additions removals">
        <li>
            <div class="partsthumb">
                <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                <img class="qq-thumbnail-selector" qq-max-size="50" qq-server-scale>
                <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
            </div>
            <div class="partsicons">
                <div class="qq-upload-cancel-selector"><i class="fa fa-ban fa-fw"></i></div>
                <div class="qq-upload-retry-selector"><i class="fa fa-repeat fa-fw"></i></div>
            </div>
        </li>
    </ul>
</div>
<--snip dialogs for brevity-->
</div>

и загрузчик JS

var manualUploader292 = new qq.FineUploader({
element: document.getElementById('fine-uploader-manual-trigger292'),
template: 'qq-parts-template',
multiple: false,
request: {
inputName: "imagegroup[]", 
endpoint: '/SaveFileAJAX.aspx'
},
validation: {
        itemLimit: 1
    },
thumbnails: {
    placeholders: {
    waitingPath: '/fine-uploader/waiting-generic.png',
    notAvailablePath: '/fine-uploader/not_available-generic.png'
    }
},
<-- snip callbacks etc for brevity -->
failedUploadTextDisplay: { mode: 'default',responseProperty: 'error',}});

0 ответов

Другие вопросы по тегам