angularjs 上传功能的实现

标签：

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;
 }

angularjs 上传功能的实现

标签：

原文地址：http://my.oschina.net/u/2349117/blog/488944