将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对话框以使其更加完善。我该怎么做呢？

参见：http://jqueryui.com/demos/dialog/#default。

- Feng-Chun Ting

---

你不能简单地将弹出框替换为对话框，而是必须重新实现弹出框作为对话框。 - some_coder

我的回答足够吗？奖励还在吗？ - GOK

Answer 1

尝试使用模态表单，在其中调用对话框，让用户上传和裁剪图像，并在单击对话框上的“使用此图片”后返回您的页面并继续应用程序。为了获得更好的性能，您可以使用Jquery Modal Form与灯箱以获得更好的用户界面。干杯！

- GOK

Answer 2

我希望我理解了你想要实现的内容。

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

- Konstantin Dinev

Answer 3

有什么问题吗？

将upload.php的代码（BODY元素内的内容）放入调用页面中的一个DIV中。

然后使用jQuery在该DIV上应用一个dialog。需要时只需激活该对话框即可。

至于代码本身-我确定您需要重新连接一些东西，但是这个想法非常简单，我真的不明白为什么这个问题有100个声望的赏金，真的。不是我介意拥有它哈哈！

- Poni

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

- mschr