天天看點

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”錯誤,樓主本人就被卡在這兒半天!鑒于樓主本人水準有限,如有錯誤的地方請大家指正!