angularjs手机webapp 利用input拍照，图库选择、缩略图显示 上传图片（一）

运行后的截图：

html代码

<ul class="list_img">
    <li ng-repeat="imageSrc in imgshows track by $index">
        <img
                ng-src="{{imageSrc}}"
                alt="">
        <i ng-click="DeleteImg($index, imgshows)"
                class=" fa fa-times del"></i>
    </li>
    <li class="add_btn" ng-click="shareCapture.addimage(1)" ng-if="imgshows.length<=2">
        <img src="././static/img/plus.png" alt="">
        <div class="file-box" >
            <input
                    type="file"
                    name="file"
                    file-model="myFile"
                    accept="image/*"
                    class="file-btn"/>
            <div>上传截图</div>
        </div>
    </li>
</ul>

js代码

自定一个指令directive

function fileModel ( $parse ) {
    return {
        restrict : 'A',
        link : function ( scope, element, attrs, ngModel ) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;
            element.bind('change', function ( event ) {
                scope.$apply(function () {
                    modelSetter(scope, element[ 0 ].files[ 0 ]);
                });
                scope.file = (event.srcElement || event.target).files[ 0 ];
                scope.getFile(scope.file);
                // $('#uploadfile').val(''); //发现拍照上传后再次拍照不会调用change方法，加入这行代码可解决
            });
        }
    };
}

上传函数controller

$scope.getFile = function ( file ) {
    console.info(file)
    Upload.upload({
        url : photoUrl,//上传服务的地址
        data : {//上传的数据参数
            photoFile : file
        }
    })
        .then(function ( resp ) {
                var fileUrl = resp.data;
                 $scope.imgshows.push(fileUrl.object.showImage);
            },
            function ( resp ) {
                console.log(resp.data, "上传失败");
            },
            function ( evt ) {//上传进度显示
                var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                console.log('progress: ' + progressPercentage + '% ');
            });
};

删除图片函数

DeleteImg : function ( index, imgs ) {
       $scope.imgshows.splice(index, 1);
}

图片上传成功了，剩下的就是保存你上传的图片了，这个功能很简单了，直接拿到需要保存的参数数据，调取接口，进行提交就OK啦

angular
    .module('uploadimg')
    .directive('fileModel', fileModel)
    .controller('shareCaptureCtrl', shareCaptureCtrl);

 

---

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！