window.open popup auf jQuery UI Dialog aktualisieren

Question

Ich habe ein Formular mit einer Schaltfläche erstellt. Wenn Benutzer auf die Schaltfläche klicken, erzeugt der Browser ein Popup-Fenster, in dem der Benutzer ein Foto hochladen und zuschneiden kann.

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

wenn hochgeladen

window.opener.document.getElementById

das Popup gibt das ausgeschnittene Bild an das Eröffnungsfenster (Formular) zurück

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

Abschließend wird in dem Popup eine Schaltfläche "Dieses Bild verwenden" angezeigt.

Jetzt möchte ich dieses Popup auf jQuery Dialog aktualisieren, um es zu polieren. Wie kann ich das tun?

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

Answer 1

Versuchen Sie, ein modales Formular zu verwenden, in dem Sie den Dialog für den Benutzer zum Hochladen und Zuschneiden des Bildes aufrufen können. Wenn Sie im Dialog auf Dieses Bild verwenden klicken, kehren Sie zu Ihrer Seite zurück und setzen Ihre Anwendung fort.

Bessere Leistungen können Sie mit Jquery Modal Formular mit Lighbox für eine bessere Benutzeroberfläche.

Prost!!!

Answer 2

Was ist das Problem?

Nehmen Sie upload.php Code (das Material innerhalb der BODY Element) und legen Sie es innerhalb der aufrufenden Seite, innerhalb einer DIV .

Dann wenden Sie eine dialog mit jQuery auf dieser DIV . Dann aktivieren Sie diesen Dialog einfach bei Bedarf.

Nun, was den Code selbst betrifft - ich bin sicher, Sie müssen ein paar Dinge neu verdrahten, aber die Idee ist sehr einfach und ich verstehe wirklich nicht, warum diese Frage ein Kopfgeld von +100 Ruf hat, wirklich. Nicht, dass ich etwas dagegen hätte, es zu haben, haha!

Answer 3

Ich hoffe, ich habe verstanden, was genau Sie zu erreichen versuchen.

Hier ist ein jsfiddle-Beispiel: http://jsfiddle.net/nNw33/3/

Hier ist der Code:

$(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>

Answer 4

Sie sollten dieses nette Plugin lesen, mit dem Sie Dateien asynchron hochladen können.

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

Folgendes einfügen body wo immer auf der Seite es passt:

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

Folgendes hinzufügen head um das Plugin zu laden. Nettes Beispiel Verwendung hier

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

Es arbeitet mit einem versteckten Iframe, der die Ergebnisse an Ihr Backend übermittelt, ohne ein Fenster zu öffnen.

Auf diese Weise kann alles in einem "Fenster" erledigt werden, oder, lassen Sie uns das Dialog-Popup machen, nach dem Sie wahrscheinlich suchen

Schnappen Sie sich Beispielcode aus einem hier fummeln . Der folgende Code kann überall eingefügt werden, auch global zugänglich

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
    });
}