Angular JS文件上传内容处理

Question

我是Angular JS的新手，并试图上传文件。 我的要求是按钮点击提交多部分数据。

我在ng-model上读取不能在type =“file”上工作，所以我得知周围的工作，并且复制了指令。在完成该指令后，在发送数据时，没有内容处置数据集。我的意思是我想在服务器端读取的文件名，内容类型等。 这就是为什么我得到空的headerOfFilePart.getFileName()

我做错了什么。什么是正确的方式来实现我上面在Angular JS中描述的事情。

<div ng-controller="uploadController"> 
     <h2> Add Order </h2> 
     Enter your Name: 
      <input type="text" name="name" ng-model="myName"/> 
      <input type="file" fileread="vm.uploadme" /> 
      <input type="button" name="button" ng-click='uploadFile()'/> 
    </div> 

这是我的JS部分

validationApp.controller('uploadController', function($scope,$http,$location,$window) { 
    $scope.uploadFile = function() { 

     var fd = new FormData(); 
     //Take the first selected file 
     fd.append("file", $scope.vm.uploadme); 
     fd.append("name", $scope.myName); 

     uploadUrl = "http://localhost:8080/IPOCCService/rest/UserManager/upload1"; 
     $http.post(uploadUrl, fd, { 
      withCredentials: true, 
      headers: {'Content-Type': undefined }, 
      transformRequest: angular.identity 
     }). 
     success(function(data, status, headers, config) { 
      alert(data); 
     }). 
     error(function(data, status, headers, config) { 
      alert("failure"); 
     }); 

    }; 
}); 


validationApp.directive("fileread", [function() { 
    return { 
     scope: { 
      fileread: "=" 
     }, 
     link: function (scope, element, attributes) { 
      element.bind("change", function (changeEvent) { 
       var reader = new FileReader(); 
       reader.onload = function (loadEvent) { 
        scope.$apply(function() { 
         scope.fileread = loadEvent.target.result; 
        }); 
       }; 
       reader.readAsDataURL(changeEvent.target.files[0]); 
      }); 
     } 
    }; 
}]); 

REST JAVA

@POST 
    @Path("/upload1") 
    @Produces({ MediaType.APPLICATION_JSON}) 
    @Consumes(MediaType.MULTIPART_FORM_DATA) 
    public Response responseMsg3(FormDataMultiPart form) { 
     System.out.println("File Uploaded"); 

     FormDataBodyPart filePart1 = form.getField("name"); 
     System.out.println(filePart1.getName() + " = " +filePart1.getValue()); 

     FormDataBodyPart filePart = form.getField("file"); 

     ContentDisposition headerOfFilePart = filePart.getContentDisposition(); 
     InputStream fileInputStream = filePart.getValueAs(InputStream.class); 
     String filePath = SERVER_UPLOAD_LOCATION_FOLDER + headerOfFilePart.getFileName(); 



     // save the file to the server 
     saveFile(fileInputStream, filePath); 
     String output = "File saved to server location : " + filePath; 
     return Response.status(200).entity("true").build(); 
    } 

Answer 1

app.directive('fileRead', ['$parse', function ($parse) { 
return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     var model = $parse(attrs.fileread); 
     var modelSetter = model.assign; 

     element.bind('change', function(){ 
      function readURL(input) { 
       if (input.files && input.files[0]) { 
        var reader = new FileReader(); 
        reader.readAsDataURL(input.files[0]); 
       } 
      } 
      readURL(this); 
      scope.$apply(function(){ 
       modelSetter(scope, element[0].files[0]); 
      }); 
     }); 
    } 
}; 
}]); 

<input type="file" file-read="vm.uploadme" /> 

这个指令对我的作品。

Answer 2

您可以使用该模块NG文件上传那就是做everythinh有关文件上传See here

Answer 3

当您使用FileReader阅读您的文件，只有内容的文件的分配给你的范围指令：

scope.fileread = loadEvent.target.result; 

在你的情况，只是简单的文件分配给您的范围：

link: function (scope, element, attributes) { 
     element.bind("change", function (changeEvent) { 
     scope.$apply(function(){ 
       scope.fileread = changeEvent.target.files[0]; 
     // changeEvent.target.files[0] is an HTML5 file object which contains ALL 
     // information about the file including fileName, contents,... 
     // scope.fileread is now assigned the selected file 
     }); 
    }); 
}