Question

当我尝试上传pdf文件时，文件上传后没有显示缩略图。但它显示了视频缩略图和ppt。我已经为缩略图创建了自定义指令。这是我的代码，

我的HTML代码：

            <div class="col-md-5" style="overflow: hidden">
            <div style="display: inline-block" ng-if="thumbfilelink" ng-thumb="{ file: thumbfilelink, height: 100, width:75, fromServer:true, fileURL:thumbfilelink }"></div>
            <div style="display:inline-block" ng-if="!thumbfilelink&&!item.isError">
            <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><span class="sr-only">Loading Preview...</span>
            </div>
            <span style="position: absolute;    margin-left: 15px;" ng-bind="item.file.name"></span>
        </div>

控制器：

            uploader.onSuccessItem = function (fileItem, response, status, headers) {
            console.info('onSuccessItem', fileItem, response, status, headers);
            $scope.$parent.delegate.onAttachmentUpload(response);
            growl.addSuccessMessage($translate.instant('fileUpload.singlefileSuccess'));
          // $scope.thumbfilelink=response.link;
            $scope.thumbfilelink=$rootScope.app.coreURI +'file/image/'+response.id+'/preview';
        };

自定义指令：

 return {
            restrict: 'A',
            template: '<div>' +
            '<canvas class="ac-thumb" style="width:75px" />' +
            '' +
            '</div>',
            transclude:true,

            link: function (scope, element, attributes) {
                if (!helper.support) return;


                var canvas = element.find('canvas');
                var reader = new FileReader();
                if(params.fromServer) {                 
                      var img = new Image();
                      img.onload = onLoadImage;
                      img.src = params.fileURL;
                }
                else {
                     if (!helper.isFile(params.file)) return;
                     if (!helper.isImage(params.file)) return;
                     reader.readAsDataURL(params.file);
                     reader.onload = onLoadFile;
                }


                function onLoadFile(event) {
                    var img = new Image();
                    img.onload = onLoadImage;
                    img.src = event.target.result;
                }

               function onLoadImage() {
                    var width = params.width || this.width / this.height * params.height;
                    var height = params.height || this.height / this.width * params.width;
                    canvas.attr({width: width, height: height});
                    canvas[0].getContext('2d').drawImage(this, 0, 0, width, height);
                } }
        };
    }]);
}).call();

Answer 1

你需要操纵这个事件。 onChange事件。使用on-change事件，将其作为指令处理，传递控制器函数，将通过bind调用。

文件上传后，Angularjs pdf缩略图未显示

1 个答案: