2

这是我的场景。我正在使用 iframe 创建图像上传。情况是这样的，如果有人将鼠标悬停在该 iframe 上，则会在其上打开另一个具有两个按钮的 div。一个按钮是选择另一个图像，另一个按钮是清除 iframe 中存在的图像。

这是视图的代码：

   @using (Html.BeginForm("Index", "LandingSetting", FormMethod.Post, new { enctype = "multipart/form-data" }))
                            {
                                @Html.ValidationSummary(true)
    <div id="menu" class="tip_trigger">
        <iframe width="731" height="335" src="@ViewData[" htmlloc "]"></iframe>
        <div id="inner" class="hover-text">
            <table>
                <tr>
                    <td width="50%" align="center" valign="middle">
                        <img id="slctbtn" src="../../Images/Landing/s_btn.PNG" />
                    </td>
                    <td width="50%" align="center" valign="middle" style="padding-left: 200px">
                        <img id="clearbtn" src="../../Images/Landing/c_btn.PNG" />
                    </td>
                </tr>
            </table>
        </div>
    </div>
}

这是悬停的代码：

 <script type="text/javascript">
        $(document).ready(function () {
            //Tooltips
            $(".tip_trigger").hover(function () {
                tip = $(this).find('.hover-text');
                tip.show(); //Show tooltip
            }, function () {
                tip.hide(); //Hide tooltip        
            });
            //    
        });
    </script>

这是两个按钮的代码：

<script type="text/javascript">
        $(function () {
            $('#slctbtn').click(function () {
                $('#htmla').click();
            });
            $('#htmla').change(function () {
                $('form').submit();
            });
            $('#clearbtn').click(function () {
                $(this).load('@Url.Action("Clear", "LandingSetting")');
                alert('Content Cleared!');
                window.location.reload(true);
            });
        });
    </script>

注意：htmla是隐藏的输入类型文件

这是我的控制器代码：

  public ActionResult Clear()
        {
            System.IO.File.Delete(Request.MapPath("/CSS/html/imgs/ex1.jpg"));
            return RedirectToAction("Index");
        }

问题是这在 IE8 以外的其他浏览器中运行良好。只有悬停代码在 IE8 中有效。我需要让它专门在 IE8 中工作。有人可以帮忙吗？谢谢

注意：在 IE 中，点击事件被触发，因为我可以看到警报但它不会触发 @url.action 方法

4

1 回答 1

2

以下内容可能令人感兴趣：

jquery触发文件输入

看来您的问题是由于文件输入为或而click没有被触发。您可以尝试设置，而是 - 但是不会禁用输入的点击 - 或者更好地仍然使用 adardesign 建议的屏幕外定位。display:nonevisibility:hiddenopacity:0filter:alpha(opacity = 0);

如果这不起作用，我见过的关于触发文件上传点击的其他技巧是定位输入，使其漂浮在所需按钮的顶部，然后使其不透明度淡出为 0 . 这意味着用户仍然可以访问输入的点击，但按钮的 GUI 显示通过。这确实是一个非常不雅的黑客攻击。

http://www.quirksmode.org/dom/inputfile.html

更新

鉴于上述不是您的问题，您可以尝试稍微修改一下，看看是否有任何改进：

$('#clearbtn').click(function(){
  $.ajax('@Url.Action("Clear", "LandingSetting")')
    .done(function(response){
      alert('response: '+response);
      alert('Content Cleared!');
      window.location.reload(true);
    })
    .fail(function(jqXHR, textStatus){
      alert('an error occured ' + textStatus);
    })
  ;
});

只要@Url.Action("Clear", "LandingSetting")呈现到格式正确的 URL，那么我看不出上面会有问题的原因。如果您view source在有问题的页面上，您应该能够滚动到负责的代码并找到正在生成的 URL。如果这个 URL 存在并且 IE8 可以访问，那么问题就出在了其他地方。

可能的解释

啊，好的，所以这似乎有效。我的猜测是为什么 IE8alerts在 jQuery ajax 请求之后直接出现问题。我的猜测是该alert过程会停止，然后在单击警报离开后，由于window.location.reload(true);在请求有机会到达服务器之前，页面会重新加载。其他浏览器工作的原因可能是因为它们允许 ajax 调用发生，尽管有警报，因此在重新加载之前有一些额外的时间进行通信。

...解决方案，将来总是使用回调来确定ajax请求已经完成:)

于 2013-04-05T07:15:30.240 回答