Вопрос по – Grails Асинхронная загрузка файлов

0

Есть ли истинная загрузка асинхронного / AJAX-файла в Grails, который подключается к стандартному «занятому» прядильщику (тот, который отображается при других вызовах AJAX)?

Или, если бы я хотел показать этот спиннер во время загрузки файла, мне нужно было бы явно позвонить?

Ваш Ответ

3   ответа
0

Я бы так написал ...

Возьмите только путь к файлу у пользователя. Отправьте путь к файлу для закрытия / метода загрузки файла и в асинхронном блоке выполните чтение и сохранение файла. Возможно, тебе придется использоватьExecutor плагин для этого для асинхронной функциональности. В этом сценарии вам не нужно отображать изображение счетчика. Потому что отправить путь к файлу очень просто, а ответ очень быстрый.

Вы должны вызвать счетчик, если хотите показать себя в коде. Если вы хотите отобразить изображение.

Этот подход не обеспечит немедленную обратную связь с пользователем и позволит им добавить еще один файл до завершения загрузки первого. Michael J. Lee
2

хоч некоторая помощь от третьей стороны из-за некоторых сложностей и ограничений, стоящих за обменом.

Некоторые плагины доступны для jquery, в которых для этого используется Flash, но я предпочитаю избегать всего, что использует Flash (личные предпочтения). Проверять, выписыватьсяValums Ajax-Upload Я уже почти год пользуюсь им на своей производственной площадке, и он хорошо работает и прост в использовании. Больше всего в плагине мне нравится то, что он ненавязчив в дизайне и макете большинства сайтов.

Кроме того, это часто задаваемый вопрос. Проверьте эти ответы, а также ...

Stackoverflow - Можно ли использовать Ajax для загрузки файлов?Stackoverflow - удаленная загрузка файловStackoverflow - загрузка Ajax-файла
Существует также Grails плагин доступно, что использует Valums Ajax-Upload. aiolos
0

вот полный код проекта, который я сделал с включенным перетаскиванием:

HTML
<div id="drop_zone">Drag and drop your file here or click</div>
<input id="curriculumUploader" type="file" name="curriculum" style="display:none;"/>
JAVASCRIPT
    function uploadCurriculum(file) {
        var xmlhttp;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        //FormData will contain the post params
        var form = new FormData();

        xmlhttp.onreadystatechange = function() {
            //Handle response if everything is right
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                //This is the element where i will put my response
                var element = document.getElementById('curriculum');
                //The response is given in the property responseText
                element.innerHTML = xmlhttp.responseText;
                //If you response has javascript elements, you need to place them in the header to make client compile them
                var scriptElements = element.getElementsByTagName('SCRIPT');
                for (i = 0; i < scriptElements.length; i ++) {
                    var scriptElement = document.createElement('SCRIPT');
                    scriptElement.type = 'text/javascript';
                    if (!scriptElements[i].src) {
                        scriptElement.innerHTML = scriptElements[i].innerHTML;
                    } else {
                        scriptElement.src = scriptElements[i].src;
                    }
                    document.head.appendChild(scriptElement);
                }
            }
        }
        //Put your params in the url if you want to send them by GET
        xmlhttp.open("POST", window.appContext + "/controller/action/" + someParams, true);
        xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        //add the file to the form to send by POST
        form.append('curriculum', file);
        xmlhttp.send(form);
    }

    function handleFileSelect(event) {
        handleDragOver(event);

        var files = event.target.files || event.dataTransfer.files;

        if (files.length > 0) {
            parseFile(files[0]);
        }
    }

    function handleDragOver(event) {
        event.stopPropagation();
        event.preventDefault();
        if (event.type == "dragover") {
            event.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
            addClass(event.target, "hover");
        } else {
            removeClass(event.target, "hover");
        }
    }

    function showFileSelect() {
        document.getElementById('curriculumUploader').click();
    }

    function parseFile(file) {
        if (file != null && file.size > 0) {
            uploadCurriculum(file)
        } else {
            console.log('Invalid file');
        }
    }

    // Setup the dnd listeners.
    var dropZone = document.getElementById('drop_zone');
    if (dropZone != null) {
        dropZone.addEventListener('dragover', handleDragOver, false);
        dropZone.addEventListener("dragleave", handleDragOver, false);
        dropZone.addEventListener('drop', handleFileSelect, false);
        dropZone.addEventListener('click', showFileSelect, false);
    }

    var inputelement = document.getElementById('curriculumUploader');
    inputelement.addEventListener('change', handleFileSelect, false);
CSS
    #drop_zone {
        padding: 15px;
        text-align: center;
        border: 1px dashed #4b9df2;
        color: #4b9df2;
        cursor: pointer;
        transition: all linear 0.2s;
    }

    #drop_zone.hover {
        border: 1px dashed #C99F23;
        color: #C99F23;
    }
FormData не поддерживается для IE <10. Developer.mozilla.org / EN-US / Docs / Web / API / FormData ohager

Похожие вопросы