Angularjs上传图片预览--关键代码

最新推荐文章于 2020-12-31 04:43:36 发布

吃瓜群众欢乐多

最新推荐文章于 2020-12-31 04:43:36 发布

阅读量330

点赞数

文章标签： angularjs

本文链接：https://blog.csdn.net/sinat_36146776/article/details/70263921

版权

'use strict';


angular
    .module('app')

    .directive('fileUploader', ['$window', function($window) {
        return {
            restrict:'AE',
            scope:{
                fileUrl:'=',
                acceptType:'@',
                addData:'@',
                url:'='
            },
            link:function(scope,elem,attr){
                var uploader = angular.element("<input type='file' style='visibility:hidden'>");
                elem.append(uploader);
                elem.bind("click", function () {
                    uploader[0].click();
                });
                uploader.bind("change",function(){//当图片选择好后，准备上传时触发
                    scope.uploadFile(uploader[0].files);
                });
                scope.uploadFile=function(files){//预览图片
                    var img=angular.element("<img alt='图片'/>");
                    elem.append(img);
                    img[0].src=getFileUrl(uploader[0]);//获得url
                }
                function getFileUrl(sourceId){
                    var url = window.URL.createObjectURL(sourceId.files.item(0));
                    return url;
                }
                
            }
        }
    }]);

html

<body ng-controller="AppController">
        <div class="container">
            <ul>
                <li ng-repeat="item in vo.imgs">
                    <div class="big-div" file-uploader file-url="item.url" file-id="item.id" accept-type="image/*">
                    </div>
                </li>
            </ul>
        </div>
    </body>

吃瓜群众欢乐多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angularjs上传图片预览--关键代码

'use strict';angular .module('app') .directive('fileUploader', ['$window', function($window) { return { restrict:'AE', scope:{ fileUrl:'=',
复制链接

扫一扫