最近做了一个下载文档的功能，于是联想到了上传功能，于是自己研究了一下后台语言是java的情况下怎样实现将文件上传到指定的目录，以下是项目的语言：
1、后台用jfinal框架
2、前台用jquery提交
3、样式用了bootstrap和jquery
中间还因为需求发现了一个不错的jquery库，后面会有讲解，不多啰嗦了，下面直接开始吧：
一、前端
1、先添加一个上传文件的按钮:
<button id="upload_blog" type="button" class="btn btn-info btn-lg" > <span class="glyphicon glyphicon-upload">上传</span> </button>
注意：button和span中的class都是bootstrap中的样式，直接拿过来用，不过用之前是要引入bootstrap相关样式的！！！
2、点击上传文件的按钮弹出一个选择上传文件的modal(模态框):
<div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" id="close">×</button> <h4 class="modal-title">上传文件</h4> </div> <div class="modal-body"> <div id="sizecheck" class="alert alert-danger"> 提示：上传文件大小不能超过50M! </div> <form action="" enctype="multipart/form-data" id="upload_file_form" accept="application/msword"> <span style="display: inline;margin-left: 50px;">请选择上传文件:</span><input id="file1" type="file" name="up_blog" style="display: inline;"> <div id="filecheck" class="alert alert-danger"><strong>Warning!</strong>只能上传pdf和word两种类型的文件</div> </form> </div> <div class="modal-footer"> <button id="yes_blog" type="button" class="btn btn-info">确定</button> <button id="no_blog" type="button" class="btn btn-info" data-dismiss="modal">取消</button> </div> </div> </div> </div>
上面是弹出的选择文件的模态框，点击确定按钮会向后台发送上传文件的请求：
3、提交表单，将上传请求发送到服务器：
$("#upload_blog").click(function(){
$("#myModal").modal();
$("#filecheck").attr("hidden","hidden");
$("#sizecheck").attr("hidden","hidden");
$("#yes_blog").click(function(){
$("#upload_file_form").ajaxSubmit({
url:"/blog/uploadFile",
type:"POST",
dataType:"json",
async:false,
data:{},
beforeSubmit:function(){
//先判断文件类型--只能上传word、pdf或txt等文本类型的文件
var fileName = $("#file1").val();
var extension = fileName.substr(fileName.lastIndexOf("."));
if(extension==".pdf" || extension==".doc" || extension==".docx"){
$("#filecheck").attr("hidden","hidden");
}else{
$("#filecheck").removeAttr("hidden");
return false;
}
//判断上传文件的大小
var fileSize = $("#file1")[0].files[0].size;
//获取的文件大小单位是比特byte
if((fileSize/(1024*1024))>50){
$("#sizecheck").removeAttr("hidden");
return false;
}else{
$("#sizecheck").attr("hidden","hidden");
}
},
success:function(m){
if(m.error=="1"){
alert(m.message);
clearFile();
return false;
}else{
$("#close").trigger("click");
toastr.success("文件上传成功！");
clearFile();
return true;
}
}
});
});
});
上面的JS代码就会将上传文件的表单提交到后台，在提交表单之前进行了一系列的验证：
第一：判断文件类型，只能上传word、pdf和txt等文本类型，否则会有提示并阻止表单的提交；
第二：判断文件的大小是否超过50M，否则会有提示并阻止表单的提交；
二、后台：
1、jfinal的controller中完成uploadFile方法：
/** * 上传文件 * @throws IOException * @throws FileNotFoundException */ public void uploadFile(){ /*String fileDate = new SimpleDateFormat("yyyy-MM-dd").format(new Date());*/ UploadFile uploadFile = this.getFile(); JSONObject jsonObj = new JSONObject(); String fileName = uploadFile.getFileName(); File file = uploadFile.getFile(); String extension = fileName.substring(fileName.lastIndexOf(".")); String prefix; if(extension.equals(".jpg")||extension.equals(".png")||extension.equals(".gif")){ prefix = "images"; }else{ prefix = "docs"; } String filePath = file.getAbsolutePath(); File targetDir = new File(filePath.substring(0,filePath.indexOf(fileName))+prefix); File targetFile = new File(targetDir.getPath()+"/"+fileName); if(!targetDir.exists()){ targetDir.mkdir(); } //字节数组方式上传文件 //jsonObj = BlogService.sevice.uploadByByte(filePath, fileName, file, targetFile); //通道方式上传文件 jsonObj = BlogService.sevice.uploadByChanel(filePath, fileName, file, targetFile); renderJson(jsonObj.toJSONString()); }
注意：在上面的代码中可以看到有【字节数组方式上传文件】和【通道方式上传文件】，这是我在实现过程中发现的，并对这两种方法都做了实现：
2、在service中编写业务逻辑，有两种方式：
第一种方式：字节数组方式
/** * 使用字节的方式上传文件 * @param filePath * @param fileName * @param sourceFile * @param targetFile * @return */ public JSONObject uploadByByte(String filePath,String fileName,File sourceFile,File targetFile){ FileInputStream fis = null; FileOutputStream fos = null; JSONObject jsonObj = new JSONObject(); try { fis = new FileInputStream(sourceFile); int fileSize = fis.available(); fos = new FileOutputStream(targetFile); byte[] file_byte = new byte[fileSize]; if(fis.read(file_byte,0, fileSize)!=-1){ fos.write(file_byte, 0, fileSize); } jsonObj.put("error", 0); sourceFile.delete(); } catch (FileNotFoundException e) { jsonObj.put("error", 1); jsonObj.put("message", "上传出现错误，请稍后再上传"); }catch (Exception e) { jsonObj.put("error", 1); jsonObj.put("message", "文件写入服务器出现错误，请稍后再上传"); }finally{ try { fis.close(); fos.close(); deleteAllFile(new File(filePath.substring(0,filePath.indexOf(fileName)))); } catch (IOException e) { e.printStackTrace(); } } return jsonObj; }
第二种方式：通道方式
/** * 使用通道的方式上传文件 * @param filePath * @param fileName * @param sourceFile * @param targetFile * @return */ public JSONObject uploadByChanel(String filePath,String fileName,File sourceFile,File targetFile){ JSONObject jsonObj = new JSONObject(); FileInputStream fis = null; FileOutputStream fos = null; FileChannel in = null; FileChannel out = null; try { targetFile.createNewFile(); fis = new FileInputStream(sourceFile); fos = new FileOutputStream(targetFile); in = fis.getChannel();//得到对应的文件通道 out = fos.getChannel(); in.transferTo(0,in.size(),out);//连接两个通道，并且从in通道读取后写入out通道 jsonObj.put("error", "0"); } catch (IOException e) { jsonObj.put("error", "1"); jsonObj.put("message", "文件写入服务器出错，请稍后再传！"); }finally{ try { fis.close(); fos.close(); in.close(); out.close(); deleteAllFile(new File(filePath.substring(0,filePath.indexOf(fileName)))); } catch (IOException e) { e.printStackTrace(); } } return jsonObj; }
其实两种方式的差别不是特别大，大家可以自己研究一下！！
注意：在controller中对文件上传的位置进行了自定义：
首先Jfinal默认保存路径是webroot下的upload文件夹，要想保存在自己定义的文件夹中，先要在jfinal中进行配置，如果我要保存在webroot下的/static/upload中就要进行下面的配置：
me.setBaseUploadPath(PathKit.getWebRootPath()+"/static/upload");
然后要根据文件的类型，在自定义路径下分类创建不同的文件夹保存文件。controller中调用service之前的代码就是做了这个功能：
UploadFile uploadFile = this.getFile(); JSONObject jsonObj = new JSONObject(); String fileName = uploadFile.getFileName(); File file = uploadFile.getFile(); String extension = fileName.substring(fileName.lastIndexOf(".")); String prefix; if(extension.equals(".jpg")||extension.equals(".png")||extension.equals(".gif")){ prefix = "images"; }else{ prefix = "docs"; } String filePath = file.getAbsolutePath(); File targetDir = new File(filePath.substring(0,filePath.indexOf(fileName))+prefix); File targetFile = new File(targetDir.getPath()+"/"+fileName); if(!targetDir.exists()){ targetDir.mkdir(); }
最后，会发现即便是自己根据文件类型在默认路径下定义了新的文件夹，而且文件也会分类保存在相应的文件夹下，但是jfinal还是会在默认路径下保存一份文件，这样同一份文件，在默认路径下和默认路径下的自定义路径中都
保存了一份，如下图所示：
所以为了上文件只保存在指定的目录中，就要做一个删除upload目录下的冗余文件的操作，就是service中调用的deleteAllFile(new File(filePath.substring(0,filePath.indexOf(fileName))));这部分，实现如下：
/** * 删除默认路径下的文件 * @param file */ public void deleteAllFile(File file){ File[] files = file.listFiles(); for(int i=0;i<files.length;i++){ File filei = files[i]; if(filei.isFile()){ filei.delete(); } } }
以上所有步骤就完成了一次上传文件到指定目录的功能，下面说一下刚开始说的发现的有趣的jquery库，可以在提交表单的代码中看到这么一句：
toastr.success("文件上传成功！");
其实这是一个提示框，而且可以设置自动消失，避免用户知道自己操作成功之后还要手动关闭提示框的操作，下面说一下这个技术的实现：
第一步：下载相关的包，并引入相关文件：
只要搜索toastr.js下载就会找到github资源路径，下载压缩包，解压后找到这几个文件：
不一定都能用到，但是都放在lib里，以备不时之需，我在这里只用到了这几个：
<link rel="stylesheet" type="stylesheet" href="../../static/js/lib/bootstrap/css/message/toastr.min.css"> <link rel="stylesheet" type="stylesheet" href="../../static/js/lib/bootstrap/css/message/messenger.css"> <script type="text/javascript" src="../../static/js/lib/bootstrap/js/message/messenger.min.js?v=${version}"></script> <script type="text/javascript" src="../../static/js/lib/bootstrap/js/message/messenger-theme-future.js?v=${version}"></script>
第二步：使用前进行配置：
/*提示框配置 */ toastr.options = { /* closeButton:false,//是否配置关闭按钮 debug:false,//是否开启debug模式 neweastOnTop:false,//新消息是否排在最上面 progressBar:false,//是否显示进度条 preventDuplicates:false,//是否阻止弹出多个消息框 onclick:null,//点击回调函数 showDuration:"300",//显示动作时间 hideDuration:"300",//隐藏动作时间 */ positionClass: "toast-center",//消息框的显示的位置 timeOut:"1000",//自动关闭的超时时间，即1秒后关闭 /* extentedTimeOut:"1000", showEasing:"swing", hideEasing:"liner", showMethod:"fadeIn",//显示的方式 hideMethod: "fadeOut",//关闭的方式 */ }
上面是所有配置信息以及作用的解释，值得注意的是，positionClasss属性，默认的值有：
可以看到，这些属性值中，提示框的位置都是在边缘，没有在中间的，所以我就自定义了一个处于中间位置的class：toaster-center
大家也可以根据自己的页面属性自定义 ！！
配置完之后就是使用了，其实使用起来很简单，就一句代码的事：
toastr.success("文件上传成功！");
success方式只是定义了弹出框的背景颜色，总共有四种方式：
1、success成功：绿色
2、info信息：蓝色
3、warning警告：橙色
4、error错误：深红色
这个颜色的标准跟bootstrap中是一样的！
以上就是本次文件上传的所有代码，以及延伸jquery库的介绍，下次会介绍后台语言选择PHP的情况下的文件上传，今天就到此为止吧，抬头发现，人都走了，我也该下班去锻炼身体了！