Question

我正在使用下载按钮和上传按钮在MVC中构建页面。当用户单击上传时，我使用JQuery UI Dialog显示弹出窗口以显示警告消息。单击此弹出窗口中的“确定”按钮，然后使用Jquery提交表单。这在Firefox中运行良好，但表单不在IE中提交。

视图

<form id="form1" enctype="multipart/form-data" method="post">
    <div style="clear:both; margin-top:10px">      
        <fieldset>
            <legend>Legend</legend>

            <div style="float:right">
                <input type="file" name="file" id="file" style="display:none" onchange="SetFakeText();"/>
                <input id="txtFakeText" readonly="readonly" onclick="HandleFileButtonClick();" style="width:280px"/>

                <input type="button" id="cmdFakeButton" value="Browse" onclick="HandleFileButtonClick();"/>                
                <input type="button" id="ReUploadButton" value="Upload"/>  
            </div>

            <input type="submit" name="submitButton" value="Download" />

        </fieldset>
    </div>

    <div id="dialog">
        <label style="font-weight:bolder; color:red;">Warning!</label>
        <br />
        <label>Uploading will overwrite old data</label>
        <br />
        <img id="loading" src="<%= ResolveUrl("~/Images/LoadingSpinner.gif")%>" alt="" style="display:none; margin-left:120px;"/>  
    </div> 
</form>

剧本

<script type="text/javascript">
    function HandleFileButtonClick() {
        document.getElementById('file').click();
    };

    function SetFakeText() {
        document.getElementById('txtFakeText').value = document.getElementById('file').value;
    };

    $('#ReUploadButton').click(function() {
        $('#dialog').dialog('open');
    });

    $(function(){                       
    $('#dialog').dialog({
    autoOpen: false,
    width: 300,
    position: 'center',
    title: 'Uploading',
    modal: true,
    buttons: {
        'Ok': 
        function () {
            document.getElementById('loading').style.display = 'block';
        $('#form1').submit();
                }, 
        'Cancel': 
        function() { 
        $(this).dialog("close"); 
        } 
    }
    });             
});    
</script>

我已阅读并且常见修复无效。有人有任何提示吗？

编辑：

此外，如果我单击对话框的“确定”按钮3次，它会触发控制器操作，但不会传入文件。

解决

使“真实”输入可见后。使用真实输入浏览按钮将允许表单提交。但是使用假的Browse按钮调用： -

function HandleFileButtonClick() {
        document.getElementById('csvFile').click();
    };

导致问题。我将使用不同的方法来设置输入字段的样式。

Answer 1

如果您将对话框附加到form元素，是否可以解决您的问题？（默认情况下，jQuery将对话框附加到body标签）

$(function(){                       
    $('#dialog').dialog({
      autoOpen: false,
      width: 300,
      position: 'center',
      title: 'Uploading',
      modal: true,
      buttons: {
        'Ok': 
        function () {
            document.getElementById('loading').style.display = 'block';
        $('#form1').submit();
                }, 
        'Cancel': 
        function() { 
        $(this).dialog("close"); 
        } 
      }, 
      open: function(){
         $('.ui-dialog').appendTo('form');
      }
    });

如果这是.NET，当元素不在form标记内

时，我看到.NET做了一些令人讨厌的事情

修改：尝试定位.ui-dialog代替$（this）

Answer 2

也许你应该在表单中添加一个动作，即使它是空的？

不确定代码中是否还有其他内容导致问题，因为我无法复制问题

see my fiddle

IE中的Jquery UI对话框表单提交错误

2 个答案: