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

来源：互联网发布：mac磁盘怎么看空间编辑：程序博客网时间：2024/05/18 22:46

'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