Angularjs 实现多图片上传预览

水深无声 2022-05-15 12:10 360阅读 0赞

先看效果图

![70][]

图片上传的预览，我们最主要解决的是拿到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);

--------------------

![20191229112121499.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[70]: /images/20220515/aa1ce45336b044ea9ba371e145ca1ede.png
[20191229112121499.png]: /images/20220515/c58786ae79244b21832ccab3395b4825.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220515/e2ba1c73330d4226a1a5d411ee2c4d6b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，360人围观）

还没有评论，来说两句吧...

相关阅读

相关上传图片实现预览

![Image 1][]浏览器必须支持FileReader,先判断是否支持。监听type属性等于file的input的change（值改变）事件。使用F

Bertha 。/ 2023年10月16日 22:41/ 0 赞/ 15 阅读

相关 Angular4 实现多图片上传预览

之前写了一个angular1x的实现，但手痒痒于是就搞了一下angular4的实现方式，不BB直接上代码了。样式里用到了fontawesome的图标首先我们直接看如何调用

谁借莪１个温暖的怀抱￠/ 2022年06月08日 12:35/ 0 赞/ 336 阅读

相关 Angularjs 实现多图片上传预览

最近要实现一个多图片上传的预览功能，网上有很多例子大多不太完整，我就把他们的整合了下并且加了一些功能和界面，我们只需要调用一条指令就可以实现，但传给后台还需要额外的代码，会在后

我会带着你远行/ 2022年06月08日 09:56/ 0 赞/ 353 阅读

相关 jquery 实现图片上传预览

jquery 实现图片上传预览 1.如下代码就能实现： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

蔚落/ 2022年06月05日 01:57/ 0 赞/ 480 阅读

相关 Angularjs 实现多图片上传预览

先看效果图 ![70][] 图片上传的预览，我们最主要解决的是拿到input的on-change事件，再是读取图片，读取图片我们需要用到FileReader。我们先写一

水深无声/ 2022年05月15日 12:10/ 0 赞/ 361 阅读

相关图片预览与上传

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

小鱼儿/ 2022年04月24日 10:50/ 0 赞/ 597 阅读

相关一个图片上传预览

一、一个按钮上传文件操作前台选择文件，只能通过input的file类型的文件选择框操作。但有时却为了界面的美观，要求用按钮来完成。第一步、隐藏文件选择框第二步、

╰半橙微兮°/ 2022年04月08日 11:56/ 0 赞/ 625 阅读

相关上传图片并预览

HTML： <input accept="image/" name=" fileImage" type="file" onchange="upload"> <

Myth丶恋晨/ 2021年11月23日 10:16/ 0 赞/ 785 阅读

相关多图片上传预览的实现

闲话日常：有时候在项目中，可能会用到图片上传的预览功能，而之前总是在网上找相关的插件进行实现，但是有的时候发现别人写好的插件，有时候会影响到自身布局的样式，偶尔还很难进

比眉伴天荒/ 2021年11月17日 06:06/ 0 赞/ 575 阅读

相关 extjs上传图片预览

[EXTJS图片上传预览(含本地上传前预览和服务器图片预览)][EXTJS] 创建EXTJS组件 ![复制代码][copycode.gif] 1 //生成me

系统管理员/ 2021年09月10日 07:04/ 0 赞/ 822 阅读