Question

这是我的情景。我正在使用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方法

Answer 1

以下内容可能会引起关注：

Jquery trigger file input

似乎您的问题是由于click没有被触发，因为文件输入是display:none或visibility:hidden。您可以尝试设置opacity:0和filter:alpha(opacity = 0); - 但输入的点击不会被禁用 - 或者更好地仍然使用屏幕外定位，如adardesign所示。

如果这不起作用，我看到的关于触发文件上传点击的其他技巧是定位输入，使其浮动在所需按钮的顶部，然后使其不透明度褪色这意味着用户仍然可以访问输入的点击，但按钮的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")呈现为格式正确的网址，我就没有理由认为上述内容存在问题。如果您在页面上view source有问题，您应该能够滚动到负责的代码并找到正在生成的URL。如果此URL存在且IE8可以访问，那么问题就是其他问题。

可能的解释

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

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

jquery代码在除ie8之外的每个浏览器中工作

1 个答案:

更新

可能的解释