【如何封装上传图片指令 _FormData 】

如何封装上传图片指令
我也踩过这个坑( 1 )
已统计您的踩坑,无需重复点击
回答(0)
FormData
详细描述
截图
代码
引用指令的标签
<up-load></up-load>
封装指令的HTML文件
<div class="art-form1">
    <div class="col-md-2 col-sm-2 col-xs-2 art-left">
        配       图
    </div>
    <div  class="col-md-10 col-sm-10 col-xs-10 art-r">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <label for="file" class="btn btn-primary">选择文件</label>
            <input type="file"
                   id="file"
                   accept="image/png,image/gif"
                   name="file"
                   onchange="angular.element(this).scope().fileChanged(this)"
                   style="display: none;"
                   required/>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <img ng-src="{{src}}" alt="配图预览" class="art-img" width="100%"/>
        </div>
        <div class="col-md-8 col-sm-8 col-xs-8">
            <table>
                <thead>
                <tr>
                    <th>
                        图片名
                    </th>
                    <th>
                        文件大小
                    </th>
                    <th>
                        进度
                    </th>
                    <th>
                        操作
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr ng-if="fileName">
                    <td>{{fileName}}</td>
                    <td>{{fileSize|number:2}}MB</td>
                    <td>
                        <uib-progressbar value="progress" style="margin-bottom: 0;" type="null" animate="true" >{{progress}}%</uib-progressbar>
                    </td>
                    <td>
                        <span class="glyphicon glyphicon-ok" ng-show="okIcon"></span>
                        <span class="glyphicon glyphicon-remove" ng-show="removeIcon"></span>
                    </td>
                    <td>
                        <button class="art-up" data-ng-click="upload()" ng-disabled="progress">上传</button>
                        <button class="art-del" data-ng-click="delete()">删除</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
封装指令的JS文件
myApp.directive("upLoad", function($http){
    return{
        restrict: 'EA',
        templateUrl: 'html/upload.html',
        replace: true,
        link: function(scope){
            scope.fileReader = new FileReader();
            scope.fileChanged = function(respond){
                scope.$apply(function(){
                    scope.files = respond.files[0];
                    scope.input = respond;
                    scope.fileName = scope.files.name;
                    scope.fileSize = scope.files.size/1024/1024;
                    scope.progress=0;
                });
            };
            // 上传图片
            scope.upload = function(){
                var formData = new FormData();
                scope.fileReader.readAsDataURL(scope.files);
                formData.append("file",scope.files);
                if(scope.fileSize <= 5242880){
                    $http({
                        method: 'post',
                        url: '/carrots-admin-ajax/a/u/img/task',
                        data: formData,
                        headers:{"Content-Type":undefined},
                        uploadEventHandlers: {
                            progress: function(respond){
                                scope.progress = (respond.loaded/respond.total)*100;
                            }
                        }
                    }).then(function successCallback(respond){
                        scope.status = respond.data.message;
                        scope.src = respond.data.data.url;
                        scope.okIcon=true;
                    });
                }else{
                    alert('文件大于5MB');
                    scope.removeIcon=true;
                }
            };

            //删除图片
            scope.delete = function(){
                scope.src = undefined;
                scope.fileName = '';
                scope.progress = 0;
                scope.input.value = '';// 防止删除一个文件后不能再次上传同一个文件的问题
                scope.okIcon=false;
            };
        }
    }
});
编辑于2025-04-04