使用IE8通过fileupload控件在图像控件中预览图像

时间:2015-08-31 11:23:26

标签: javascript jquery asp.net internet-explorer-8

在我的asp.net应用程序中,对于一组特定的用户,我必须使应用程序在IE8中运行。在页面中我有fileupload html控件和图像控件。以下代码我写的是预览图像,

               $("#browsePhoto").change(function () {
                    var input = this;
                    if (input.files && input.files[0]) {

                        var reader = new FileReader();

                        reader.onload = function (e) {
                            var fileSize = Math.round(e.total / 1024);
                            if (fileSize < 100) {
                                $("[id$=img_userPhotoPreview]").attr('src', e.target.result);
                                $("[id$=hdnSrc]").val(e.target.result);
                            }
                            else {
                                alert("Image size is greater than 100kb. Please choose an image of size less than 100kb.");
                                $("[id$=img_userPhotoPreview]").attr('src', "");
                                $("#browsePhoto").val("");
                            }
                        }
                        reader.readAsDataURL(input.files[0]);
                    }
                });

以上代码在IE10及以上版本以及所有其他浏览器中都能正常运行。但在IE8中失败了。

1 个答案:

答案 0 :(得分:0)

IE8不支持输入的文件属性,所以你可以用来代替input.files到e.target.value,而且FileReader()函数不是IE8和IE9的默认,所以你不能使用文件阅读器来阅读它尺寸和图纸。

因此,如果您想使用相同的代码,我的建议是不要在IE8或IE9中运行,现在有一天没有人使用它。

否则我正在修改IE8的代码:

         <html >
        <head runat="server">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {

                $("#browsePhoto").change(function (e) {
                    debugger;
                    var input = this;
                    if (e.target.value) {
                        $("[id$=img_userPhotoPreview]").attr('src', e.target.value);
                    }
                });
            });
        </script>
            <title></title>
        </head>
        <body>
            <form id="form1" runat="server">
            <div>
            <input type="file" id="browsePhoto" name="browsePhoto" onclick="" />
            <img id="img_userPhotoPreview" src="" height="200" width="200">
            </div>
            </form>
        </body>
        </html>

但是在这里你不能得到图像的确切大小。所以最好的是:为了检查尺寸你可以使用图像高度和宽度属性。