升级window.open弹出到jQuery UI对话框

Question

我创建了一个带有按钮的表单。 如果用户单击该按钮，浏览器将生成一个弹出窗口，供用户上传和裁剪照片。

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

如果上传

window.opener.document.getElementById

弹出窗口会将裁剪后的图片返回到打开窗口（窗体）

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

最后，弹出窗口将生成一个“使用此图片”按钮。

现在，我想将此弹出窗口升级到jQuery Dialog以使其完善。 我怎样才能做到这一点？

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

Answer 1

尝试使用模态表单，您可以在其中调用对话框以供用户上传和裁剪图像，然后单击对话框上的“使用此图片”； 返回页面并继续您的申请。

更好的性能，您可以使用带有lighbox的Jquery Modal Form以获得更好的UI。

干杯！！！

Answer 2

问题是什么？

获取upload.php的代码（ BODY元素中的内容），并将其放在DIV的调用者页面内。

然后在该DIV上使用jQuery dialog 。 然后在需要时激活该对话框。

现在，关于代码本身-我确定您需要重新连接一些东西，但是想法很简单，我真的不明白为什么这个问题确实有100倍的声誉。 不是我介意拥有它哈哈！

Answer 3

希望我能得到您正在努力实现的目标。

这是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>

Answer 4

您应该阅读这个可爱的插件，该插件可让您异步上传文件。

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