Question

我创建了一个上传图片的简单表单。

它允许在选择后立即预览图像。

它在Chrome和Firefox中运行良好，但在IE中则不行，其中： - 图像预览根本不起作用; - 只有在第二次（提交）按钮单击后，才能成功提交表单。

任何想法如何解决？

您可以在http://jsfiddle.net/renatogil/qFjrE/

看到它发生

代码是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//PT" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!-- Include The jQuery Library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
//----------------------------------------------------
// img preview
//----------------------------------------------------
//
function readURL(input, pic) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#' + pic)
                .attr('src', e.target.result)
                .width(120)
                .height(120);
        };
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
</head>
<body>

    <form method="post" action="<?php echo $_SERVER["PHP_SELF"]; ?>"
        enctype="multipart/form-data">

        <img id="product_pic" src="img/default_product_pic.jpg" width="120"
            height="120" alt="Click to upload..." /><input id="product"
            name="product" type="file"
            style="visibility: hidden; overflow: hidden; display: none;"
            onchange="readURL(this, 'product_pic');"><br> <br> <input
            id="add_pic" type="button" value="Add picture">
        </div>

        <script>$('#product_pic').click(function() { $('#product').click(); });$('#add_pic').click(function() { $('#product').click(); });</script>

        <input type="submit" value="Upload" />
        </div>
    </form>

</body>
</html>

Answer 1

在检查您的代码之后，您似乎已经关闭了它在任何地方都没有打开？

图像上载预览不起作用，并且只有在Internet Explorer中第二次单击后才会提交表单

1 个答案: