目前需要实现一个文件上传的功能，由于后台使用了nutz这个框架，所有实现的文件上传跟spring mvc有所不同，只是文件的上传，并没有实现图片的预览，插件可以有图片预览的功能。

插件

前端使用了文件上传的插件，插件的地址是：（https://github.com/codler/jQuery-Ajax-Upload）
下载插件后放到项目目录下，在前端引入该插件。

效果图

Paste_Image.png

使用方法

1、首先在nutz配置upload.js，主要是用于加载文件的操作，具体可以查看nutz官网，
upload.js文件放在项目的resources目录下，主要配置临时文件的目录，临时文件的大小等。

var ioc = {
    tmpFilePool : {
        type : 'org.nutz.filepool.NutFilePool',
        // 临时文件目录，也可以配置大小，如： args : [ "D:/data/log"，1000]
        args : [ "D:/data/log"]   
    },
    uploadFileContext : {
        type : 'org.nutz.mvc.upload.UploadingContext',
        singleton : false,
        args : [ { refer : 'tmpFilePool' } ],
        fields : {
            // 是否忽略空文件, 默认为 false
            ignoreNull : true,
            // 单个文件最大尺寸(大约的值，单位为字节，即 1048576 为 1M)
            maxFileSize : 62914560,
            // 正则表达式匹配可以支持的文件名
            //nameFilter : '^(.+[.])(gif|jpg|png)$' 
        } 
    },
    myUpload : {
        type : 'org.nutz.mvc.upload.UploadAdaptor',
        singleton : false,
        args : [ { refer : 'uploadFileContext' } ] 
    }
}

2、后台实现文件的操作，tempFile可以获取文件的大小，文件的名字，可以对文件进行操作，answerId是前端form表单的其他参数，可以用来做一些额外的操作。@AdaptBy主要是说明接口是用于文件操作的，其中args的参数就是我们在upload.js中配置的。

@At("/upload")
@AdaptBy(type = UploadAdaptor.class, args = { "ioc:myUpload" })
@Ok("raw:json")
public String upload(@Param("uploads")TempFile tf,@Param("answerId")String answerId){
        Map<String, Object> map = new HashMap<>();
        if(tf == null || "".equals( tf ) || answerId == null || "".equals( answerId )){
            map.put( "result", "上传失败!" );
            return Json.toJson( map );
        }
        try {
            System.out.println(tf.getSubmittedFileName());
            System.out.println(tf.getSize());
            String[] postfix = tf.getSubmittedFileName().split("\\.");
            String path = "D:\\data\\temp\\";
            File temp = new File( path );
            if(!temp.exists()){
                temp.mkdirs();
            }
            tf.write( temp.getPath() + "\\" + answerId + "." + postfix[postfix.length - 1] );
            tf.delete();
            map.put( "result", "上传成功!" );
        }
        catch( Exception e ) {
            e.printStackTrace();
            map.put( "result", "上传失败!" );
        }
        return Json.toJson( map );
    }

3、前端的实现，前端使用了bootstarp和angularjs框架，form表单里就是要上传的文件。

<form id="formFirst" name="upload" enctype="multipart/form-data" 
        method="post" class="form-horizontal">
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-2">
                <input type="file" name="uploads"/></p>
                <input type="button" value="上传" ng-click="uploadall('formFirst')"/>
                <input type="hidden" value="第一个文件" name="answerId">
            </div>
        </div>
    </form>
    <hr/>
    <form id="formSecond" name="upload" enctype="multipart/form-data" 
        method="post" class="form-horizontal">
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-2">
                <input type="file" name="uploads"/></p>
                <input type="button" value="上传" ng-click="uploadall('formSecond')"/>
                <input type="hidden" value="第二个文件" name="answerId">
            </div>
        </div>
    </form>

<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('mycontroller',function($scope){
 //通过id来判断是哪个form表单进行上传操作
    $scope.uploadall = function(id){
        $("#" + id).ajaxUpload({
            url:"${base}/mail/upload",
            dataType:'json',
            success: function (data, status, xhr){
                $scope.$apply(function () {
                    alert(data.result);
                  });
            }
        });
    }
});
</script>

注意事项

1、在前端进行ajax请求的时候记得加上dataType:'json'，这句话，主要是用于告诉前端接受的数据是json数据。
2、后台接口需要加上@Ok("raw:json")这句话，主要是用于后台返回json数据，在nutz官网中有说明。

![Uploading Paste_Image_154950.png . . .]

参考资料

1、nutz官网（http://www.nutzam.com/core/mvc/file_upload.html）