天天看点

Angularjs集成第三方插件 Uploadify

Angularjs集成第三方插件 Uploadify

var snailapp= angular.module("snail",[....]);  

snailapp.directive("snailuploadify", function() {  

    return {  

        require: '?ngmodel',  

        restrict: 'a',  

        link: function ($scope, element, attrs, ngmodel) {  

            var opts = angular.extend({}, $scope.$eval(attrs.nluploadify));  

            element.uploadify({  

                'fileobjname': opts.fileobjname || 'upfile',  

                'auto': opts.auto!=undefined?opts.auto:true,  

                'swf': opts.swf || '/plugin/uploadify/uploadify.swf',  

                'uploader': opts.uploader || '/admin/uploader/imageup',//图片上传方法  

                'buttontext': opts.buttontext || '本地图片',  

                'width': opts.width || 80,  

                'height': opts.height || 25,  

                'onuploadsuccess': function (file, d, response) {  

                    if (ngmodel) {  

                        var result = eval("[" + d + "]")[0];  

                        if (result.state == "success") {  

                            $scope.$apply(function() {  

                                ngmodel.$setviewvalue(result.url);  

                            });  

                        }  

                    }  

                }  

            });  

        }  

    };  

});  

 调用方法:

Angularjs集成第三方插件 Uploadify

<div id="uploadifytest" class="btn" ng-model="image" snail-uploadify="{auto:false,buttontext:'图片上传'}" >  

<code>&lt;</code><code>img</code> <code>ng-show="image" ng-src="image"  style="height: 80px;"/&gt;</code>

注意:上面集成的uploadify中只调用了部分参数,大家可以根据需要添加,另外在调用该插件时必须在调用元素上添加id,否则会报“could not find the placeholder element”错误,楼主本人就被卡在这儿半天!鉴于楼主本人水平有限,如有错误的地方请大家指正!