html中选取图片并预览

最新推荐文章于 2024-06-06 10:36:09 发布

Mars-xq

最新推荐文章于 2024-06-06 10:36:09 发布

阅读量7.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： angularjs angularjs

本文链接：https://blog.youkuaiyun.com/sinat_31057219/article/details/70231692

angularjs 同时被 2 个专栏收录

38 篇文章

订阅专栏

angularjs

37 篇文章

订阅专栏

注意点：

1、使用FileReader对象的readAsDataURL方法来读取图像文件:

fileReader.readAsDataURL的执行顺序：在fileReader.onload前执行。

2、保存图片的base64字符串，使用sessionStorage做缓存。

3、动态创建节点并添加

ng-click='deletePhoto($event)'

时，需要在append前添加

var $li = $compile(li)($scope);

才能起作用。

4、$event.target不一定是添加点击事件的节点，如本例中，是i节点中的img。第一个parentElement获取的是i节点。

var delImg = event.target.parentElement.parentElement;
delImg.remove();

完整demo：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../jquery.js"></script>
    <script src="../angular.min.js"></script>
    <script src="../layer/layer.js"></script>
    <style>
        body, div, ul, li, img, a {
            margin: 0;
            padding: 0;
            border: 0;
        }

        /*设置自动换行*/
        .spanStyle {
            word-break: break-all;
        }

        .picContainer {
            background-color: #fff;
            padding: 1%;
        }

        ol, ul, li {
            list-style: none;
        }

        .picContainer ul li {
            width: 23%;
            padding: 1%;
            float: left;
        }

        .picContainer ul li img {
            width: 100%;
        }

        /*隐藏默认input file的样式，动态设置成加号图片的大小，并放在加号图片的上方以便点击选取图片*/
        .input_file_cls {
            position: absolute;
            z-index: 10;
            width: 50px;
            height: 55px;
            opacity: 0;
        }

        /*为删除叉设置父容器的样式：让删除叉相对于自己*/
        .pic-li {
            position: relative;
        }

        /*删除叉的样式*/
        .pic-i {
            position: absolute;
            right: 0;
            top: 0;
            width: 1.4rem;
        }

    </style>
</head>
<!--
element.addEventListener(event, function, useCapture)
addEventListener() 方法用于向指定元素添加事件句柄。

event:必须。字符串，指定事件名。
function:必须。指定要事件触发时执行的函数。
useCapture:可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
        可能值:
        true - 事件句柄在捕获阶段执行
        false- false- 默认。事件句柄在冒泡阶段执行
-->

<body ng-app="myAppShowPic" ng-controller="myCtrlShowPic">
请选取一个图像文件: <input type="file" id="file" name="file" multiple/>
<div id="result"></div>

<hr/>

<div class="picContainer">
    <ul class="clearfix">
        <div id="showPics">
        </div>
        <li>
            <input id="input_sel_file" accept="image/png,image/gif,image/jpeg" type="file" class="input_file_cls"
                   multiple="multiple">
            <img id="inputIcon" src="photo_pic02.png">
        </li>
    </ul>
</div>

<script>
    var app = angular.module("myAppShowPic", []);

    //======================================本地存储数据服务===================================
    app.factory('locals', ['$window', function ($window) {
        return {        //存储单个属性
            set: function (key, value) {
                $window.sessionStorage[key] = value;
            },        //读取单个属性
            get: function (key, defaultValue) {
                return $window.sessionStorage[key] || defaultValue;
            },        //存储对象，以JSON格式存储
            setObject: function (key, value) {
                $window.sessionStorage[key] = JSON.stringify(value);//将对象以字符串保存
            },        //读取对象
            getObject: function (key) {
                return JSON.parse($window.sessionStorage[key] || '{}');//获取字符串并解析成对象
            }

        }
    }]);

    app.controller("myCtrlShowPic", function ($scope, $compile, locals) {

        /*-------------------------------------  示例一  ------------------------------------------*/
        $("#file").change(function () {
            var files = $(this).prop('files');//获取input file的files属性：包含所选择的图片信息
            for (var i = 0; i < files.length; i++) {
                var fileReader = new FileReader();

                fileReader.onload = function (event) {
                    var txt = event.target.result;//图片url信息：base64的字符串

                    fileToImg(txt);//先选择的先显示：预览图片

                    //i=6（打印6次）：后执行
                    console.log("========fileReader.onload========i========================" + i);
                };

                //i=0,1,2,3,4,5：先执行
                console.log("========= fileReader.readAsDataURL========i=========" + i);
                fileReader.readAsDataURL(files[i]); // 返回一个基于Base64编码的data-uri对象。
            }
        });

        function fileToImg(base64) {
            if (!checkPhotoNum()) {
                return;
            }

            if (base64) {
                var img = document.createElement("img");
                img.src = base64;
                var div = document.createElement("div");
                div.className = "spanStyle";
                div.innerHTML = base64;
                document.getElementById("result").appendChild(img);
                document.getElementById("result").appendChild(div);
            }
        }

        function checkPhotoNum() {
            var img = $("#result").children("img");
            if (img.length == 4) {
                layer.msg("仅能上传4张图片！");
                return false;
            } else {
                return true;
            }
        }

        /*-----------------------------------------------------------------------------------------*/
        /*-------------------------------------  示例二  ------------------------------------------*/

        /*设定input file和需要显示的图片的大小为：加号图片的大小*/
        var imgWidth = 0;
        var imgHeight = 0;
        imgWidth = $("#inputIcon").width();
        imgHeight = $("#inputIcon").height();//加号大小
        console.log("imgheight===" + imgHeight);
        console.log("imgwidth===" + imgWidth);

        $("#input_sel_file").width(imgWidth);
        $("#input_sel_file").height(imgHeight);//设置input file的大小
        console.log("input宽度" + $("#input_sel_file").width());
        console.log("inputbutton宽度" + $("#inputIcon").width());

        var localImgDatas = '';
        if (locals.get("localImgDatas")) {
            console.log("获取缓存！！！！！！！！！！！！！！！！");
            localImgDatas = locals.get("localImgDatas");//缓存的图片
        }

        $("#input_sel_file").change(function () {
            var files = $(this).prop('files');
            for (var i = 0; i < files.length; i++) {
                var fileReader = new FileReader();
                fileReader.onload = function (event) {
                    fileToImg1(event.target.result);

                    localImgDatas = localImgDatas + "=" + event.target.result;
                    locals.set("localImgDatas", localImgDatas);
                };
                fileReader.readAsDataURL(files[i]); // 返回一个基于Base64编码的data-uri对象。
            }
        });

        var showImgDatas = '';
        showImgDatas = localImgDatas;
        if (showImgDatas) {
            var showImgDataArr = showImgDatas.split("=");
            for (var i = 0; i < showImgDataArr.length; i++) {
                if (showImgDataArr[i]) {
                    fileToImg1(showImgDataArr[i]);
                }
            }
        }

        /*显示选择的图片*/
        function fileToImg1(base64) {
            if (!checkPhotoNum1()) {
                return;
            }
            if (base64) {
                var li =
                    "<li class='pic-li'>" +
                    "<img class='sel-photo' style='height:" + imgHeight + "px;width:" + imgWidth + "px' src='" + base64 + "'>" +
                    "<i class='pic-i' ng-click='deletePhoto($event)'>" +
                    "<img src='quiz_del.png'>" +
                    "</i>" +
                    "</li>";
                var $li = $compile(li)($scope);
                $("#showPics").append($li);
            }
        }

        /*不能超过四张图片*/
        function checkPhotoNum1() {
            var img = $("#showPics li").children("img.sel-photo");
            if (img.length == 4) {
                layer.msg("仅能上传4张图片！");
                return false;
            } else {
                return true;
            }
        }

        $scope.deletePhoto = function (event) {
            var delImg = event.target.parentElement.parentElement;//li

            var delSrc = delImg.children[0].src;//选取的图片
            var delSrcIndex = localImgDatas.indexOf(delSrc);//如果有缓存则删除
            if (delSrcIndex > 0) {
                localImgDatas = localImgDatas.replace(delSrc, "");
            }
            locals.set("localImgDatas", localImgDatas);

            delImg.remove();//删除节点
        };

        /*-----------------------------------------------------------------------------------------------*/

    });

</script>
</body>
</html>