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

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.csdn.net/qing_gee/article/details/48949701 
   b、http://blog.csdn.net/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);                }            });

本博文纯属作为笔记。