图片预览(适用于IE6,9,10，Firefox)

最新推荐文章于 2024-11-08 16:09:18 发布

weixin_30487701

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量43

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/wcyBlog/p/4030174.html

版权

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js实现浏览图片预览</title>
    <style type="text/css">
        body {
        }

        a, img {
            border: 0;
        }

        .button {
            background-color: #0075AC;
            border-radius: 20px;
            color: #FFF;
            font-family: "微软雅黑";
            font-size: 14px;
            height: 30px;
            line-height: 30px;
            padding: 0 15px;
            display: inline-block;
            text-decoration: none;
        }

        .file {
            width: 0px;
            height: 0px;
            overflow: hidden;
            position:absolute;
            left:-100px;
            top:-100px;
            z-index:-999;
        }

        #filelist {
            min-height: 30px;
            height: auto;
            /*border: 1px solid #c9c9c9;*/
            margin: 5px 0;
        }

            #filelist img {
                margin: 5px 0 5px 5px;
            }
    </style>
    <script type="text/javascript">
        //预览图片
        function previewImage(file) {
            //标准浏览器,FF、谷歌
            if (file["files"] && file["files"][0]) {
                var reader = new FileReader();
                reader.onload = function (evt) {
                    document.getElementById('img1').src = evt.target.result;
                }
                reader.readAsDataURL(file.files[0]);
            }
                //IE
            else {
                file.select();
                var path = document.selection.createRange().text;
                document.getElementById('img1').src = path;
            }
        }
        //选择图片
        function selectImage() {
            document.getElementById('file1').click();
        }
        //开始上传,这个只适用于我们.NET,上传你暂时用不了
        function startUpload() {
            var _file1 = document.getElementById("file1");
            var _url = "_upload.aspx";

            var formData = new FormData();
            formData.append("file", _file1.files[0]);

            var _request = new XMLHttpRequest();
            _request.open("post", _url, true);
            _request.onload = function (response) {
                var name = response.currentTarget.responseText;
                alert(name);//返回上传文件名,失败返回空
            }
            _request.send(formData);
        }
    </script>
</head>
<body>
    <input id="file1" type="file" οnchange="previewImage(this)" class="file" />
    <a href="javascript:selectImage()" class="button">选择图片</a>
    <a href="javascript:startUpload()" class="button">上传文件</a>
    <div id="filelist">
        <img src="" width="100" height="70" id="img1" alt="" />
    </div>
</body>
</html>

以上个人验证过，可用！

转载于:https://www.cnblogs.com/wcyBlog/p/4030174.html