angular 添加图片

最新推荐文章于 2023-03-23 17:25:31 发布

原创最新推荐文章于 2023-03-23 17:25:31 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了如何在AngularJS应用中实现图片上传功能。通过HTML结构展示了一个包含图片显示和上传按钮的组件，其中使用`ng-src`指令绑定图片源，并通过`ng-click`调用`uploadImg`方法触发文件选择。在JavaScript部分，`$scope.uploadImg`用于模拟点击文件输入元素，而`$scope.fileUploaded`则处理文件上传成功后的回调，根据`imgType`更新图片URL。

html中

<div class="picture col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <div class="picture-box">
        <img class="picture-box-img" ng-src="{{vm.data.gsPic}}" alt=""/>
    </div>
    <button class="button1" ng-click="uploadImg();vm.imgType = 2">上传</button>
</div>

在下边还有这么一个button 位置在上传图片的下边，最好跟上传图片的div在一级。

<button style="display:none;" ng-model='filename'
        ng-change="fileUploaded(data)"
        upload='"/ajax/1.0/article/article/img/1"'
        accpet=".jpg,.png,.jpeg"></button>

angular js中

$scope.uploadImg=function(){
    $('button input[type="file"]').click();
};
$scope.fileUploaded = function(data) {
    if(vm.imgType == 1){
        vm.data.businessPic = data.url;
    }else if(vm.imgType == 2){
        vm.data.gsPic = data.url;
    }else if(vm.imgType == 3){
        vm.data.otherPic = data.url;
    }
};