html 图片预览 

<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="jquery-1.8.2.js"></script>
</head>
<body>
<form enctype="multipart/form-data">
    <img class="userHeadImg" width="200" height="180" style="border: 1px  yellowgreen solid"/>
    <input class="fileUserHeadImg" type="file" multiple="multiple" style="display: none" />
</form>
<script>
    $(function() {
        $(".userHeadImg").click(function() {
            $(".fileUserHeadImg").click();
        });
    });
    //预览图片
    function showImg(s, sender) {
        var $this = $(s);
        //获取所有文件，只有input[type=file]中才用
        var files = sender.currentTarget.files;
        for (var i = 0; i < files.length; i++) {
            //其中一个文件
            var file = files[i];
            //HTML5,浏览器中支持的对象
            var reader = new FileReader();
            // 加载 file
            reader.addEventListener("load", function (event) {
                var loadedFile = event.target;
                // 检查 format
                if (file.type.match('image')) {
                    //获取图片预览模板
                    var l = ".userHeadImg";
                    var $img = $(l);
                    $img.attr("src", loadedFile.result);
                }
            });
            // 将文件读取到reader流中
            reader.readAsDataURL(file);
        }
    }
    $(".fileUserHeadImg").change(function (sender) {
        showImg(this, sender);
    });
</script>
</body>
</html>
posted @ 2016-07-28 17:20  zcany  阅读(8)  评论(0)    收藏  举报  来源