• 使用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,"增加成功"); 
        }
    以上内容代表个人观点,仅供参考,不喜勿喷。。。
  • 相关阅读:
    mysql学习笔记
    SpringMVC和Spring父子容器关系
    hexo部署在码云中 无样式问题 冷哈哈
    Mule 动态添加Endpoint(二)
    Mule 动态添加Endpoint
    关于Depend war包的总结
    Mule 控制Service的启/止
    Spring 接管 Hibernate 配置 延迟加载(总结)
    Spring操作指南AOP基本示例(基于XML)
    Spring操作指南AOP基本示例(基于注解)
  • 原文地址:https://www.cnblogs.com/newbest/p/10261764.html
Copyright © 2020-2023  润新知