文档章节

angularjs 上传功能的实现

wsblk
 wsblk
发布于 2015/08/07 09:53
字数 379
阅读 388
收藏 5

html:

<script type="text/javascript" src="js/angular-file-upload.min.js"></script>

 

 <img id="photo" src="" style="height: 60px; width: 60px;">
    <span class="span3" data-type="logo" ng-click="uploadFile($event.target)">选择相片</span>
    <span class="tips1">注:照片大小均限制为5M以内</span>
    <input type="file" style="display: none" id="file" accept="image/*" onchange="fileChange();" ng-file-select="onFileSelect($files)">
    <input type="file" style="display: none" id="file1" accept="image/*" ng-file-select="onFileSelect($files)">

 

 

js:

angular.module("app", ['angularFileUpload'])

    .controller("upload", function($scope, $http,$location,$upload){

 

  var limitSize = 5  * 1024 * 1024;

        $scope.onFileSelect = function ($files) {

            for(var i = 0; i < $files.length; i++){
                $scope.file = $files[i];

                if($scope.file.size <= limitSize){
                    $scope.upload = $upload.upload({
                        url: con.host+"upload",     //con.host (是你的请求后台方法路径“upload” 是你的方法)
                        file: $scope.file
                    }).success(function (data) {
                        if(data.status != 'success'){
                            alert("上传失败");
                        }else{

                            var map = {};
                            map[$scope.type] = data.path;

                            $scope.postParams.pt_image = data.path;

                            var file = document.getElementById("file").files[0];

                            $("#photo").attr("src", window.URL.createObjectURL(file));
                        }
                    });
                }else{
                    alert("图片大小不得超过5M");
                }
            }
        }


        $scope.uploadFile = function(target){
            $scope.type = $(target).attr("data-type");
            if($scope.type == 'logo'){
                $("#file").click();
            }else{
                $("#file1").click();
            }
        }

        function fileChange(){
            alert("file");
            var file = document.getElementById("file").files[0];
            $("#photo").attr("src", window.URL.createObjectURL(file));
        }

});

java:

@RequestMapping(value="/upload",method=RequestMethod.POST)
 public void doAction(MultipartHttpServletRequest req, HttpServletResponse res) {
  JSONObject obj = new JSONObject();
  MultipartFile file = req.getFile("file");
  System.out.println(file+"=file");
  PrintWriter out = null;
  try {
   out = res.getWriter();
  } catch (IOException e) {
   e.printStackTrace();
  }
 
  out.print(saveFilePic(file,req));
 
 }

 

 private JSONObject saveFilePic(MultipartFile file,MultipartHttpServletRequest req) {
  JSONObject obj = new JSONObject();
  if(file == null) {
   obj.put("status", "fail");
   obj.put("reason", "file is null");
   return obj;
  }
  String fileName = file.getOriginalFilename();
        // 获取图片的扩展名
        String extensionName = fileName
                  .substring(fileName.lastIndexOf(".") + 1);
        //扩展名判断是否为图片
        if(!FileUtils.picExtCheck(extensionName)) {
         obj.put("status", "fail");
   obj.put("reason", "file is null");
   return obj;
        }
        
        String filePath = req.getSession().getServletContext().getRealPath("/") + "upload/"  //这里是项目获取路径
                + FileUtils.getRandomFileName()+"."+extensionName;    //这里是随机获取文件名 加文件后缀名
  File path = new File(filePath);
  try {//create path
   if(!path.exists()) {
    path.mkdirs();
   }
   file.transferTo(path);
   
  }
  catch(Exception e) {
   e.printStackTrace();
  }
  obj.put("status", "success");
  String paths = path.toString();
  System.out.println(paths+"---------------");
  obj.put("path", paths.split("secxpen")[1].replace("/", "\\"));
  return obj;
 }

 

© 著作权归作者所有

wsblk
粉丝 0
博文 24
码字总数 3803
作品 0
深圳
私信 提问
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.2K
26
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
189
0
ngular2 VS Angular4 深度对比:特性、性能

在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。 Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。 对于成熟的开发人员...

机器的心脏
2018/06/02
0
0
20 个有用的 Angular.js 工具

喜欢 Angular.js?我们为开发者编写了一份最佳 angular.js 工具和资源清单,这可让使用 angular 开发应用程序变得高效。 对于大多数想要设计动态 web 应用的开发者而言,Angular.js 成为了一...

Leenajose
2015/08/04
7.1K
22
使用 ng-packagr 打包 Angular

写在前面 为了让 Angular 类库应用范围更自由,Angular 提出一套打包格式建议名曰:Angular Package Format,包括 FESM2015、FESM5、UMD、ESM2015、ESM5、ES2015 格式,不同格式可以在不同的...

卡色
2018/09/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JavaScript权威指南笔记5

第五章、语句 0、概述 JS程序是一系列可执行语句的集合。 通过控制语句来改变语句的默认执行顺序。 控制语句:条件、循环和跳转(如return、break和throw) 2、复合语句 当多条语句被当做一条语...

_Somuns
3分钟前
0
0
vmware安装ubuntu18.04总是 panic -not syncing:corrupted stack end detected inside schedule

Vmware 安装ubuntu 总是卡着不动, 提示panic -not synciong 网上提示很多办法,都试了效果不佳, 找到了完美解决办法 你的兼容模式重新选一下为6.0,兼容性对硬件有要求的 即可实现 成功安装...

dragon_tech
11分钟前
1
0
centos7 安装 mysql5.7 版本(全)

centos 安装 版本说明 :centos7,mysql5.7 ,不是 centos7 可能有些命令不兼容 安装 mysql-server # 下载并安装 mysql yum wget -i -c http://dev.mysql.com/get/mysql57-community-relea......

sanri1993
40分钟前
4
0
Spring3.x升级到Spring4.x-5.x时关于MappingJacksonHttpMessageConverter的报错问题

在Spring4.x或者以上的版本强使用(不然会报错): org.springframework.http.converter.json.MappingJackson2HttpMessageConverter 如果是Spring4.0获者以下的版本可以使用MappingJacksonH...

code-ortaerc
43分钟前
4
0
OSG 渲染状态污染到其它节点怎么解决?

在根节点补上初始状态

洛克人杰洛
45分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部