最近做了一个下载文档的功能,于是联想到了上传功能,于是自己研究了一下后台语言是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中是一样的!
文件上传之Java
猜你喜欢
转载自blog.csdn.net/laiyuan999/article/details/81289354
今日推荐
周排行