Javascript Angular JS文件上载内容配置

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

我阅读了ng模型不处理type=“file”，因此我了解了解决方法，并复制了指令。执行该指令后，在发送数据时，没有内容处置数据集。我是指我想在服务器端读取的文件名、内容类型等。 这就是为什么我在

headerOfficePart.getFileName（）处得到空值的原因

我做错了什么。实现我在上文中描述的事情的正确方法是什么

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

RESTJava

    @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();
    }

app.directive（'fileRead'，['$parse'，function（$parse）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
var模型=$parse（attrs.fileread）；
var modelSetter=model.assign；
元素绑定（'change'，function（））{
函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.readAsDataURL（input.files[0]）；
}
}
readURL（this）；
作用域$apply（函数（）{
modelSetter（作用域，元素[0]。文件[0]）；
});
});
}
};
}]);

此指令对我有效。
您可以使用模块ng file upload它是一个指令，用于执行有关文件上载的所有操作。
当您使用
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
         });   
     });
}

在您的情况下，只需将文件分配到您的作用域：

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

上面的代码对你有用吗？正在将文件发送到服务器吗？除了服务器端没有得到文件名外，其他一切都正常。这可能会有所帮助，谢谢。。。。。它正在工作。。。我只是像个傻瓜一样抄袭。。不知道它到底在做什么。请您指出本指令的解释或解释。您为什么需要使用
readURL
？如果我们移动它，我看不出有什么区别。嘿，Khanh，正如我在之前的评论中提到的，我盲目地复制代码，而不了解它在做什么。请您将一个链接指向解释它的地方，或者有助于理解您提到的代码逐行执行的操作。@Jayesh:我的意思是删除，而不是移动：为什么需要使用
readURL
？如果我们删除这个，我看不出有什么区别。很好的插件。。。让我想想。嘿，Khanh，正如我在之前的评论中提到的，我盲目地复制代码，而不了解它在做什么。你能指出一个链接来解释它吗？或者可以帮助理解你提到的代码是如何逐行进行的。@Jayesh：请查看我的更新答案，看看它是否正确clearer@Jayesh：使用
FileReader
时，您只读取
内容
，而
changeent.target.files[0]
有
所有信息
包括内容、文件名等，谢谢。我明白你的解释了。这一行在做什么，modelSetter（作用域，元素[0]。文件[0]）；modelSetter函数声明在哪里？@Jayesh:您可以阅读。在这种情况下，我认为没有必要，直接分配给
scope.fileread
。