使用angular.js实现异步图片加属性的上传

记录是为了更好的成长！

在做一个前后端分离的SSM项目中，需要实现图片的上传，花了好些时间，简单记录一下，供参考：

1、这是我的html页面中表单中的代码，使用的是angular.js进行绑定属性

<form class="form-horizontal" >
      
   <input ng-model="entity.bankAccount" type="text" class="form-control">
   <select ng-model="entity.bankName" type="text" class="form-control">
       <option selected value="">请选择</option>
       <option ng-repeat="entity in banktypelist" value="{{entity.bankName}}">{{entity.bankName}}</option>
   </select>
   <input ng-model="entity.bankCardNo" type="text" class="form-control" placeholder="请输入卡号">
   <select ng-model="entity.cId" type="text" class="form-control">
       <option selected value="">选择</option>
       <option ng-repeat="entity in companylist" value="{{entity.cId}}">{{entity.cName}}-{{entity.cMark}}</option>
   </select>
   <input  id="file" name="pic" type="file" class="form-control" onchange="getPhotoSize(this)"><br>
   <img id="imghead" alt="" src="/admin/img/logo.png" width="150px" height="150px"/>
   <button type="submit" class="btn btn-default" ng-click="save()">保存</button>
   <button type="reset" class="btn btn-default">重填</button>

</form>

2、angular.js的controller中对应的代码

　　AngularJS默认的'Content-Type'是application/json ，通过设置'Content-Type': undefined，这样浏览器不仅帮我们把Content-Type 设置为

　　 multipart/form-data，还填充上当前的boundary；

　　通过设置 transformRequest: angular.identity ，anjularjs transformRequest function将序列化我们的formdata object，也可以不添加

$scope.save=function(){        
        var file = document.querySelector('input[type=file]').files[0]; //获取上传到文件
        var fd = new FormData();　　　　　　　　　　　　　　　　　　　　　　　　//封装提交的数据，一并追加到FormData中
        fd.append('pic', file); 　　　　　　　　　　　　　　　　　　　　　　　　
        fd.append("bankAccount",$scope.entity.bankAccount);
        fd.append("bankName",$scope.entity.bankName);
        fd.append("bankCardNo",$scope.entity.bankCardNo);
        fd.append("cId",$scope.entity.cId);
        
        $http({
            method:'POST',　　　　　　　　　　　　　　　　//http请求的方法，如get/post
            url:"/bankinfo/add.do",　　　　　　　　　　 //请求地址
            data:fd,　　　　　　　　　　　　　　　　　　　 //请求的数据，会作为请求体数据被post发送
            headers: {'Content-Type':undefined},     //使用angular上传一定要加上这一句，不然传给后台的是空的。
            transformRequest: angular.identity 
        }).success( 
            function (response){
                //上传成功的操作
                if(response.success){
                    alert("上传成功");
                }
                
             }
        );
    }    

3、java中controller的代码

@RequestMapping("/add")
    public Result add(BankInfo bankInfo, @RequestParam(value = "pic", required = true) MultipartFile pic,HttpServletRequest request) {
        System.out.println(bankInfo);　　　　//打印出对象信息
        System.out.println(pic.getOriginalFilename());  //打印出图片名
        
        //获取路径
        String path = request.getSession().getServletContext().getRealPath("/admin/payimgs/");
        //获取原来的文件名
        String oldName = pic.getOriginalFilename();
        //截取获得原来的文件名后缀
        String ext = oldName.substring(oldName.lastIndexOf("."));
        String newName = UUID.randomUUID().toString()+ext;
        File f = new File(path,newName);
        try {
            //输出到文件夹中
            pic.transferTo(f);
        } catch (IllegalStateException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        
        return new Result(true,"增加成功"); 
    }

以上内容代表个人观点，仅供参考，不喜勿喷。。。