Angular+Boostrap-fileinput+formdata上传图片(前端代码)

本文介绍如何利用Angular和Bootstrap实现一个简单的图片上传功能。包括前端界面布局、文件输入控件配置及样式调整,同时提供了JavaScript代码示例,演示如何预览文件类型并限制文件大小。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、先布置好前端界面的代码     

 HTML代码:

<div class="t-infoFloor">fileinput
      <span>*  上传图片:</span><input id="inputPic" type="file" class="file" data-preview-file-type="text"/>
      <span>图片后缀名必须为png、jpg、gif,文件小于2M</span>
 </div>

JavaScript代码:

     $("#inputPic").fileinput({
            language: 'zh', //设置语言
            allowedPreviewTypes : [ 'image' ],//文件类型
            allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀
            showUpload: false, //是否显示上传按钮
            maxFileSize : 2000//上传文件大小
        }).on("filebatchselected", function(event, files) {
            $scope.userPic = files;     //当选择图片后,把图片的属性及其他信息赋予$scope.userPic
        });

关于fBootstrap fileinput的使用可以参考:
   a、http://blog.youkuaiyun.com/qing_gee/article/details/48949701 
   b、http://blog.youkuaiyun.com/lvshaorong/article/details/48730145(中文翻译文档)


可以根据需要,对控件的显示颜色进行调整

CSS代码

    .file-input .btn-primary,.file-input .fileinput-remove{
        background: transparent;
        color: #8d78d7;
        border: 1px solid #8d78d7;     /*对显示的上传图标的颜色设置*/
    }
    .file-input .btn-primary:hover,.file-input .fileinput-remove:hover{
        background: #fff;
    }
    .krajee-default.file-preview-frame:not(.file-preview-error):hover{
        box-shadow: 3px 3px 5px 0 #e9e8e8;
    }
    .file-error-message{       /*若上传出错,显示的错误信息的颜色以及文字的样式设置*/
        color: #8d78d7;
        background-color: #e4f5e4;
        border: 1px solid #8d78d7;
    }

最终的前端界面效果:





2、上传图片的JS代码(Angular部分)

            $http({
                method: 'POST',
                url   : $scope.saveBasicInfoUrl,
                headers: {
                    'Content-Type': undefined
                },
                data: {
                    pic:$scope.userPic,
                    data:$scope.teaInfo
                },
                transformRequest: function(data, headersGetter){   //   转换为文件流

                    var formData = new FormData();//声明一个FormData对象

 			//document.getElementById("inputPic").files[0]为图片上传控件input的files对象
                        formData.append('userPic',document.getElementById("inputPic").files[0]);

		//下面两句代码跟上传图片无关,是我所做项目要提交给服务器的数据 
                    angular.forEach(data.data, function (value, key) {   //   append数据
                        formData.append(key, value);
                    });

                    return formData;
                }
            }).then(function(response){
                if(response.data.status){
                    $scope.alertBoxShowHide("保存成功!");
                }else{
                    $scope.alertBoxShowHide(response.data.msg);
                    console.log(response.data.message);
                }
            });

本博文纯属作为笔记。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值