通过 jquery ui 模态表单上传图像

Question

我正在尝试通过 jquery ui 模态表单上传图像..

这可能吗？我在如何从模态中获取值时遇到问题..

我一直在网上搜索，但没有明确的答案..

有人对此有任何想法吗？

这是我的模态形式的 javascript 代码：

 $("#dialog").dialog({
                modal: true,
                resizable: false,
                width: 400,
                position: "center",
                buttons: {
                    "Upload": function() {


                                                           var pos= $("#pos input:radio:checked").val();
                                                           // i still don't know how to get the value for the image uploaded

                                                           $( this ).dialog( "close" );

                                            },
                    "Cancel": function() { $( this ).dialog( "close" ); }
                                     }
            });
               });

这是我的模态形式：

<div id='dialog' title='ADD IMAGE' class='ui-dialog-content ui-widget-content'>
        <form id='myform' method='POST' enctype='multipart/form-data'>
        <fieldset>
        <div id='pos'>
        <p class='applyimage'>Where do you want to apply a background image?</p>
        <p class='applyimage'><input type='radio' class='position' name='position' id='header' value='header' checked='checked'/>&nbsp;<label for='header'>Header</label>
        <input type='radio' class='position' name='position' id='body' value='body'/>&nbsp;<label for='body'>Body</label>
        <input type='radio' class='position' name='position' id='footer' value='footer'/>&nbsp;<label for='footer'>Footer</label></p>
        <p class='applyimage'><input type='file' name='data[Image][fileName]' id='imgup'/></p>
        </div>
        </fieldset>
        </form>
        </div>

Answer 1

我建议你不要使用“buttons”参数，
而是在表单上创建上传按钮。

如果您不执行任何其他操作，它将加载您的表单设置的操作。

---

如果您确实想使用“buttons”参数（以保持样式相同），那么使用 javascript function() { $("#formName").submit() 强制提交表单应该不会有问题; 我建议执行 ajax调用

来完成提交，并使用 .success 或 .error 处理程序捕获它以执行下一步。

您必须做很多工作来更新您创建的模态 div。并且仅在.success后关闭它。