8

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

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

4

4 回答 4

3

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

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

干杯！！！

于 2012-07-20T13:00:02.750 回答
1

问题是什么？

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

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

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

于 2012-07-21T01:35:10.060 回答
1

我希望我得到了你想要达到的目标。

这是 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>
于 2012-07-24T15:35:18.143 回答
0

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

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
    });
}​
于 2012-07-26T03:16:55.297 回答