兼容所有主流浏览器的图片上传本地预览（IE\FIREFOX\CHROME)

最新推荐文章于 2021-06-04 13:24:01 发布

yuanye348623610

最新推荐文章于 2021-06-04 13:24:01 发布

阅读量906

点赞数

分类专栏： jquery 文章标签： jquery 图片上传预览

2 篇文章 0 订阅

订阅专栏

转自：http://blog.sina.com.cn/s/blog_50e6109001016cqa.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>兼容IE火狐CHROME等主流浏览器</title>

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        function readURL(input) {

            if (input.files && input.files[0]) {

                var reader = new FileReader();

                reader.onload = function (e) { $('#img_prev').attr('src', e.target.result).width(150).height(200); };

                reader.readAsDataURL(input.files[0]);

            } else {

                //IE下，使用滤镜

                var docObj = document.getElementByIdx_x('doc');

                docObj.select();

                //解决IE9下document.selection拒绝访问的错误

                docObj.blur();

                var imgSrc = document.selection.createRange().text;

                var localImagId = document.getElementByIdx_x("localImag");

                $('#localImag').width(150).height(200); //必须设置初始大小

                //图片异常的捕捉，防止用户修改后缀来伪造图片

                try {

                    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;

                } catch (e) {

                    alert("您上传的图片格式不正确，请重新选择!"); return false;

                $('#img_prev').hide();

                document.selection.empty();

    </script>

</head>

<body>

    <input type='file' id="doc" οnchange="readURL(this);" />

    <div id="localImag">

        <img id="img_prev" src="" alt="your image" /></div>

</body>

</html>

关注