обновить всплывающее окно window.open до JQuery UI Dialog - PullRequest
Новая
       60

обновить всплывающее окно window.open до JQuery UI Dialog

8 голосов
/ 03 апреля 2011

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

onclick="window.open('upload.php');"

при загрузке 

window.opener.document.getElementById

всплывающее окно вернет обрезанное изображение в открывательwindow (форма) 

document.getElementById("errMsg").innerHTML="<input type=\'button\'
onclick=\'window.close();\' value=\'Use this pic\'>";

Наконец, всплывающее окно сгенерирует кнопку «Использовать эту картинку».

Теперь я хочу обновить это всплывающее окно до jQuery Dialog, чтобы сделать его полированным.Как я могу это сделать?

http://jqueryui.com/demos/dialog/#default

Ответы [ 4 ]

3 голосов
/ 20 июля 2012

Попробуйте использовать модальную форму, в которой вы можете вызвать диалоговое окно для пользователя, чтобы загрузить и обрезать изображение, и нажав кнопку Использовать эту картинку в диалоговом окне; вернитесь на свою страницу и продолжите подачу заявления.

Для лучшей производительности вы можете использовать JQuery Modal Form с лайтбоксом для лучшего пользовательского интерфейса.

Ура !!!

1 голос
/ 24 июля 2012

Надеюсь, я понял, чего именно вы пытаетесь достичь.

Вот пример jsfiddle: http://jsfiddle.net/nNw33/3/

Вот код: 

$(document).ready(function () {
    $('#initUpload').click(function (event) {
        $('#Dialog').dialog();
        setTimeout(function () {
        // upload completes
                $('#errMsg')
                    .html("<input type=\'button\' value=\'Use this pic\'>")
                    .click(function () {
                         $('#Dialog').dialog('close');        
                    });
        }, 1500);
    });
});

HTML: 

<input type="button" id="initUpload" value="Upload" />
<div id="Dialog" style="display: none">
    Upload content here
    <div id="errMsg"></div>
</div>
1 голос
/ 21 июля 2012

В чем проблема?

Возьмите код upload.php (содержимое элемента BODY) и поместите его на страницу вызывающего абонента в пределах DIV.

Затем примените dialog с jQuery к этому DIV. Затем просто активируйте этот диалог, когда это необходимо.

Теперь, что касается самого кода - я уверен, что вам нужно переписать несколько вещей, но идея очень проста, и я действительно не понимаю, почему этот вопрос имеет награду +100 репутации, на самом деле. Не то чтобы я возражал против этого, ха-ха!

0 голосов
/ 26 июля 2012

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

http://malsup.com/jquery/form/#options-object

Добавить следующий текст в body, где бы он ни находился: 

<button onclick="openPopup()">Show dialog</button>
<div id="modalFormDia"><!-- blank --></div>

Добавьте следующее к head, чтобы загрузить плагин. Хороший пример использование здесь 

<script src="http://malsup.github.com/jquery.form.js"></script>

Работает со скрытым iframe, отправляя результаты в ваш бэкэнд, не открывая никаких окон.

Таким образом, все может быть сделано в одном «окне» или, давайте сделаем так, чтобы всплывающее диалоговое окно, которое вы, вероятно, искали

Захватите образец кода с скрипки здесь . Следующий код может быть помещен в любом месте, глобально доступны 

function onComplete(xhr) {
    // Lets expect that the server sends back
    // the URL pointing to uploaded image, an error if failed
    if (xhr.responseText.match("error")) {

        // failed
        $("#feedback").html("Upload failed: " + xhr.responseText);
    } else {

        // uploaded
        $("#feedback").html('Upload done <button>"LOVING IT, USE THIS"</button>').click(function() {
            // image accepted, close dialog and set the image on main page
            diaDom.dialog('close')
            $('#targetOnPage') // ....
        });
        $('#preview').html('<img src="' + xhr.responseText + '" alt="Image preview loads here"/' + '>');

    }
}

function openPopup() {
    // get the dialog DOM node (if first time, create)
    var diaDom = $('#modalFormDia')
    diaDom.html('<form id="myForm" onsubmit="return false;" action="upload.php" method="post" enctype="multipart/form-data">' + '<input type="file" name="myfile"><br>' + '<input type="submit" value="Upload File to Server">' + '<hr/><div id="preview"></div><div id="feedback"></div>').dialog({
        buttons: {
            "Cancel": function() {
                $(diaDom).dialog('close');
            }
        },
        closeOnEscape: false,
        autoOpen: true,
        modal: true,
        title: 'Image Uploader'

    });
    // setup form with hooks
    $('#myForm').ajaxForm({
        beforeSend: function() {
            $('#feedback').html('Upload starting')
        },
        complete: onComplete
    });
}​
...