目前需要实现一个文件上传的功能，由于后台使用了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 . . .]
