Angularjs 实现多图片上传预览

先看效果图

图片上传的预览，我们最主要解决的是拿到input的on-change事件，再是读取图片，读取图片我们需要用到FileReader。

我们先写一个读取图片的服务，这是网上的一位大神写的，直接用了

/** * 图片上传获取返回的url */

function fileReader ($q, $log){
    var onLoad = function(reader, deferred, scope) {
        return function () {
            scope.$apply(function () {
                deferred.resolve(reader.result);
            });
        };
    };

    var onError = function (reader, deferred, scope) {
        return function () {
            scope.$apply(function () {
                deferred.reject(reader.result);
            });
        };
    };

    var getReader = function(deferred, scope) {
        var reader = new FileReader(); //fileReader
        reader.onload = onLoad(reader, deferred, scope);
        reader.onerror = onError(reader, deferred, scope);
        return reader;
    };

    var readAsDataURL = function (file, scope) {
        var deferred = $q.defer();
        var reader = getReader(deferred, scope);
        reader.readAsDataURL(file);
        return deferred.promise;

    };

    return {
        readAsDataUrl: readAsDataURL
    };
}

我们现在有了图片的读取，我们再来搞定图片的on-change事件

/** * 图片上传预览 */

function file ($parse, fileReader) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs, ngModel) {
            var model = $parse(attrs.file);
            var modelSetter = model.assign;
            element.bind('change', function(event){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
                //附件预览
                scope.imgupload = (event.srcElement || event.target).files[0];
                getFile(scope.imgupload, scope);

                //获得预览图地址并且把file对象放入上传合集内
                function getFile (imgupload, scope) {
                    if(!imgupload) {
                        return;
                    }
                    fileReader.readAsDataUrl(imgupload, scope)
                        .then(function(result) {
                            scope.imgshows.push(result);
                            var file = document.querySelector('input[type=file]').files[0];
                            scope.uploadimgs.push(file);//这里是放着传给后台的数据file，下面controller的时候会有
                            console.info(scope.uploadimgs);
                        });
                }
            });
        }
    };
}

这里就是提供上传图片预览的样式，还有预览图删除的功能

$scope.imgshows = [];
$scope.uploadimgs = [];//上传图片合集放的是file对象
$scope.uploadimg_del = function(index,imgs) {
    $scope.imgshows.splice(index,1);
    // $scope.uploadimgs.splice(index,1);
}

HTML页面

<ul class="list_img">
    <li ng-repeat="imageSrc in imgshows track by $index">
        <img
                ng-src="{{imageSrc}}"
                alt="">
        <i ng-click="uploadimg_del($index, imgshows)"
                class=" fa fa-times del"></i>
    </li>
    <li class="add_btn">
        <img src="././static/img/plus.png" alt="">
        <div class="file-box" >
            <input
                    type="file"
                    name="upload_img"
                    file="upload_img"
                    placeholder="选择图片"
                    accept="image/*"
                    class="file-btn"/>
            <div>上传截图</div>
        </div>
    </li>
</ul>

如何传给后台呢，直接附上代码，其实不难在controller中写代码

$scope.save = function() {
    var Fromdata = {
        'name': $scope.form.name,
        'desc': $scope.form.descr,
        'price': $scope.form.price,
        'status': $scope.form.status?1:0,
    }
    var uploadData = createFromData(Fromdata)
    for(var i = 0; i < $scope.uploadimgs.length; i++) {
        uploadData.append('upload_imgs', $scope.uploadimgs[i])
    }

    $http({
        method:'POST',
        url:"后台地址",
        data: fd,
        headers: {'Content-Type':undefined},
        transformRequest: angular.identity
    })
        .success( function(response){
            //上传成功的操作

        });
}

//构造FormData
//@param 是一个对象
function createFromData(Fromdata) {
    var fd = new FormData();
    for(key in Fromdata) {
        fd.append(key,Fromdata[key]);
    }
    return fd
}

angular
    .module('uploadimg')
    .factory('fileReader', fileReader)
    .directive('file', file)
    .controller('shareCaptureCtrl', shareCaptureCtrl);

 

---

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