真正实现兼容IE6以上主流浏览器-上传图片预览

AndroidDev2022

于 2014-12-24 11:21:23 发布

3740

文章标签： web开发图片上传

本文链接：https://blog.csdn.net/jdfkldjlkjdl/article/details/42121405

版权

JavaWeb 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

真正实现兼容IE6以上主流浏览器-上传图片预览(注意请不用IE Tester测试,IE Tester下input file完全点不了,我是直接用虚拟机真实IE测试)

另外这里只列出了前端页面，后台处理的话可以看看我的这篇文章http://blog.csdn.net/jdfkldjlkjdl/article/details/40659823

下面是源代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>真正实现兼容IE6以上主流浏览器-上传图片预览(注意请不用IE Tester测试,IE Tester下input file完全点不了,我是直接用虚拟机真实IE测试)</title>
    <style type="text/css">
        .ctrl-file {
            height: 30px;
            width: 70px;
            display: inline-block;
            *display: inline;
            *zoom: 1;
            overflow: hidden;
            position: relative;
        }

            .ctrl-file .filehide {
                position: absolute;
                z-index: 10;
                opacity: 0;
                font-size: 60px;
                filter: alpha(opacity = 0);
                width: 70px;
                height: 30px;
                left: 0;
                top: 0;
            }

            .ctrl-file a {
                width: 70px;
                line-height: 30px;
                height: 30px;
                display: block;
                background: #000;
                color: #fff;
                font-family: '微软雅黑';
                font-size: 14px;
                text-align: center;
                text-decoration: none;
                border-radius: 5px;
            }
    </style>
</head>
<body>
    <span class="ctrl-file">
        <input type="file" class="filehide" name="filehide" οnchange="filechange(this)" />
        <a href="#">浏 览</a>
    </span>
    <div>
        <img src="" id="imgview" style="display:none;" alt="" />
    </div>
</body>
</html>
<script type="text/javascript">
    function $(id) {
        return document.getElementById(id);
    }

    function filechange(file) {
        if (file.files && file.files[0]) {
            var reader = new FileReader();
            reader.onload = function (evt) {
                showimg(evt.target.result);
            };
            reader.readAsDataURL(file.files[0]);
        } else {
            file.select();
            var src = document.selection.createRange().text;
            showimg(src);
        }
    }

    function showimg(src) {
        var img = $('imgview');
        img.src = src;
        img.style.display = 'block';
    }
</script>

源码下载: http://pan.baidu.com/s/1pJ5G1uV

AndroidDev2022

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
真正实现兼容IE6以上主流浏览器-上传图片预览

真正实现兼容IE6以上主流浏览器-上传图片预览(注意请不用IE Tester测试,IE Tester下input file完全点不了,我是直接用虚拟机真实IE测试)另外这里只列出了前端页面，后台处理的话可以看看我的这篇文章http://blog.csdn.net/jdfkldjlkjdl/article/details/40659823下面是源代码: 真正实现兼容
复制链接

扫一扫