angularjs+springmvc表单上传+文本字段

最新推荐文章于 2024-11-01 14:48:20 发布

weixin_34354945

最新推荐文章于 2024-11-01 14:48:20 发布

阅读量90

点赞数

文章标签： java

原文链接：http://www.cnblogs.com/qyhol/p/6603920.html

版权

本文介绍了一个使用Angular实现的文件上传示例，包括HTML表单、JavaScript处理函数及后端控制器方法。该示例展示了如何从前端收集文件信息，并通过$http服务发送到服务器，服务器端则利用CommonsMultipartFile类保存上传的文件。

摘要由CSDN通过智能技术生成

jsp:

<form ng-submit="fn.uploadFile()" class="form-horizontal" enctype="multipart/form-data">
    <input name="fileName" ng-model="vm.fileName">
    <input name="fileSize" ng-model="vm.fileSize">
    <input type="file" name="file" ng-model="document.fileInput" id="file" οnchange="document.getElementById('filepath').value=this.value;" />
    <input  name='filepath' id='filepath'>
    <button class="btn btn-primary" type="submit">
        Submit
    </button>
</form>

js:

fn.uploadFile=function(){
    var formData=new FormData();
    formData.append("file",file.files[0]);
    formData.append("fileName",vm.fileName);
    formData.append("fileSize",vm.fileSize);
    $http.post('/fileUpload2', formData, {
        transformRequest: function(data, headersGetterFunction) {
            return data;
        },
        headers: { 'Content-Type': undefined }
    }).success(function(data, status) {
        console.log(data);
        console.log("Success ... " + status);
    }).error(function(data, status) {
        console.log("Error ... " + status);
        console.log(data);
    });
};

controller

/*
 * 采用file.Transto 来保存上传的文件
 */
@RequestMapping("fileUpload2")
public @ResponseBody
Object  fileUpload2(
        @RequestParam("file") CommonsMultipartFile file,
        @RequestParam("fileName") String fileName,
        @RequestParam("fileSize") String fileSize
        ) throws IOException {
    long  startTime=System.currentTimeMillis();
    System.out.println("fileName："+file.getOriginalFilename());
    String path="E:/"+new Date().getTime()+file.getOriginalFilename();

    File newFile=new File(path);
    //通过CommonsMultipartFile的方法直接写文件（注意这个时候）
    file.transferTo(newFile);
    long  endTime=System.currentTimeMillis();
    System.out.println("方法二的运行时间："+String.valueOf(endTime-startTime)+"ms");
    return new ResultBean(200,"success");
}


对于上传多个文本字段，我还没有比较合适的方法，知道的朋友，可以分享下啊