html 图片预览

来源：互联网发布：apache启动不了的原因编辑：程序博客网时间：2024/06/15 08:45
<!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>
0 0