Angular+Boostrap-fileinput+formdata上传图片（前端代码）

最新推荐文章于 2023-12-25 14:17:08 发布

phoebe_huang

最新推荐文章于 2023-12-25 14:17:08 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Angular

本文链接：https://blog.youkuaiyun.com/PigBiBiX/article/details/75287115

Angular 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何利用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);
                }
            });

本博文纯属作为笔记。