Java+JavaScript完成上传下载，不需要流处理(不看保证你后悔)

今天教大家一个不用IO，不用插件，就可以进行文件上传与下载的功能。

前端使用bootstrap+JSP+JS，后端是java，数据库暂选mysql(因为关系数据库就那几个，哪个简单用哪个)。

看下数据库：

file_data字段是用来存储解析后的数据的，由于解析后，十分庞大，不得不用LongBlob(不知道的请自行脑补)，Java里我用String对应。

另外要说下，mysql数据库有大小限制，请找到mysql的my.ini文件，找到'max_allowed_packet=1M'这个字段，如果没有，请自行添加。意思就是，最大存1M的内容，不妨将它设为100M或者更高。

下面我们看看JSP:

<div>
    <form id="form" enctype="multipart/form-data">  <div class="form-group"><div class="col-sm-2" ><label for="fileUpload" class="btn btn-success"><i class="glyphicon glyphicon-plus">上传</i></label>    <input id="fileUpload" name="fileUpload" type="file" style="display:none"></div><div style="border:1px dashed #000; height:76px;width:86px;margin-left: 100px;"> <label class ="col-sm-2control-label"><img id="image" src =" " alt="" style="height:76px;width:86px;margin-top: -33px;"></label></div><br><!--存储文件的解析数据 --><input id="file_data" name="file_data" type="text" style="display: none;"><div class="col-sm-2" ><label for="submit" class="btn btn-success"><i class="glyphicon glyphicon-ok">提交</i></label><input id="submit" name="submit" type="button" οnclick="submitFile();" style="display:none"></div><div class="col-sm-2" style="margin-left: -87px;"><label for="reset" class="btn btn-danger"><i class="glyphicon glyphicon-remove">取消</i></label><input class="btn btn-danger" id="reset" name="reset" οnclick="resetUpload();" type="reset" style="display:none"></div></div></form>
</div>

以上一大堆，唯一关键的就是

<input id="fileUpload" name="fileUpload" type="file" style="display:none">

<input id="file_data" name="file_data" type="text" style="display: none;">

一个是文件上传的，一个是上传后解析内容，将内容存储的。细心的朋友看到上面用到lable标签，请不要自行删除，这是我用来做样式的，因为以往input会产生框，现在就不会了，你看：


更细心的朋友会看到有form表单，而且格式为enctype="multipart/form-data"。不错，我要用到spring的MultipartFile接口，但我必须声明下，我绝不会用它来进行数据转换与上传，仅仅是用来接收数据，用这个必须进行XML配置，请自行百度。简单的说，我完全用form表单也是可以的，这是我原来想做视频解析时搞的，也就没改。为什么说仅仅form就可以呢？请往下看。
这是我的JS,

$(function(){var path,clip = $("#image"),FileReader = window.FileReader;  $("#fileUpload").change(function() {  if (FileReader) {//chrome浏览器处理  var reader = new FileReader(),  file = this.files[0];  reader.onload = function(e) {  clip.attr("src", e.target.result);//这里是把文件转成64位数据存入<img>中的src里  };  reader.readAsDataURL(file);       setTimeout("showchange()",1000);  }else{//其他浏览器处理，火狐在这里就不写出来了，网上资料很多

            path = $(this).val();alert(path)if (/"\w\W"/.test(path)) {  path = path.slice(1,-1);  }  clip.attr("src",path);  }  });
})

//存入数据
function showchange(){var s1 = $("#image").attr("src");

    //这是JSP里面的隐藏输入框，用来存储解析后的数据的$("#file_data").val(s1);
}


上段代码是网上看到某人写的解析文件方法，我拷贝过来。
大家都知道form提交时会刷新页面，效果不是很乐观，所以这里我选择ajax提交form表单就不会刷新了：

//文件上传
function submitFile(){$.ajax({  url: getProjectRootUrl() + "/file/uploadFile.do",type: 'POST',cache: false,data: new FormData($("#form")[0]),  processData: false,  contentType: false,success: function (result) {alert(result);},  error: function (err) {  }  });
}

上图中getProjectRootUrl()方法是获取项目的路径，目的是让它跳转到我的Controller里面，不管你用啥，只要能进Controller就行。下面看下后台：

@RequestMapping("/uploadFile")@ResponseBodypublic String testUploadFile(String file_data,HttpServletRequest request,@RequestParam("fileUpload") MultipartFile file) {FileUpload fileUpload = new FileUpload();if (file.isEmpty()) {return "文件为空";}// 获取文件名String fileName = file.getOriginalFilename();// 获取文件的后缀名String suffixName = fileName.substring(fileName.lastIndexOf("."));// 文件上传后的路径String filePath = "D://file//";String fileUUIDName = UUID.randomUUID().toString().replaceAll("-", "")+ suffixName;File dest = new File(filePath + fileUUIDName);// 检测是否存在目录if (!dest.getParentFile().exists()) {dest.getParentFile().mkdirs();}try {file.transferTo(dest);//设置文件相关属性fileUpload.setFile_name(fileName);fileUpload.setFile_path(dest.getPath());fileUpload.setFile_data(file_data);fileUpload.setFile_create_by(String.valueOf(request.getSession().getAttribute("username")));fileUpload.setFile_create_time(BaseUtil.getDateTime("yyyy-MM-dd HH:mm:ss",new Date()));insertFile(fileUpload);return "上传成功！";} catch (Exception e) {e.printStackTrace();}return "上传失败！";}

以上一堆都没啥大用，唯一的用处是insertFile(fileUpload)方法，向数据库添加数据，至关重要的字段还记得吗？file_data字段，他是长Blob类型，而我是怎么接收的？看方法的参数，是不是仅仅用String来收的，通过前台解析后，存入一个隐藏的input里，然后提交表单时，带过来。

下面让大家看看，我一直提到的解析的数据是个什么鬼:




控制台从data开始都是解析后的数据，看到了吧，是不是十分庞大！如果超过1M的文件，就会解析十分慢，甚至被拖垮！所以只能进行1M内的文件处理，毕竟咱这不是什么高大上的技术。给大家演示下，将这些解析的东西直接拷贝，粘贴到浏览器地址栏，如果是图片就会立刻显示，如果是文件，就会立刻调用浏览器的下载功能！
总结一下，至关重要的就是在于JS解析，也就是上面的一大串东西。思路就是，将解析好的东西存入库中，然后调用时用JS，举例子：

//文件下载
function upload(file_id){alert(file_id);$.ajax({type:'post',url:getProjectRootUrl()+'/file/getFileByFileId.do',contentType:"application/json",dataType:'json',data:JSON.stringify({"file_id":file_id}),success: function(data){window.location.href=data.file_data;}});
}

看到了吧，是不是超级简单，至于你怎么将解析后的数据存库，我不管， 只要能存进去就好。感谢观看。

Java+JavaScript完成上传下载，不需要流处理(不看保证你后悔)相关推荐

centos nfs java_CentOS下安装配置NFS并通过Java进行文件上传下载
1:安装NFS (1)安装 yum install nfs-utils rpcbind (2)启动rpcbind服务 systemctl restart rpcbind.service 查看服务状态 ...
java文件流 m.jb51.net_FasfDFS整合Java实现文件上传下载功能实例详解
今天使用Java代码实现文件的上传和下载.对此作者提供了Java API支持,下载fastdfs-client-java将源码添加到项目中.或者在Maven项目pom.xml文件中添加依赖 org.c ...
文件上传 java web_JavaWeb 文件上传下载
1. 文件上传下载概述 1.1. 什么是文件上传下载所谓文件上传下载就是将本地文件上传到服务器端,从服务器端下载文件到本地的过程.例如目前网站需要上传头像.上传下载图片或网盘等功能都是利用文件上传下 ...
ftp上传文件服务器报550错误_java ftp下载文件，Java 实现ftp上传下载文件
最近项目中需要实现将文件先存放到ftp上,需要的时候再从ftp上下载,做的过程中碰到了问题,发现中文文件名的无法上传到ftp上,ftp上的中文文件名的文件下载不下来,几番折腾,终于搞定了,记录一下备忘 ...
Java Web 文件上传下载
文章目录 1文件上传概述 1.1文件上传的作用 1.2文件上传对页面的要求 1.3 比对文件上传表单和普通文本表单的区别 1.4 对普通文本表单的测试 1.5 文件上传对Servlet的要求 2 co ...
阿里云oss 使用, 基于Nginx 配置云服务器+oss的内网访问 , 及使用Java SDK 完成上传,下载,删除,查询文件列表操作
一.同阿里产品,云服务器和存储对象oss-配置内网访问阿里存储对象oss 地址: https://oss.console.aliyun.com/overview 配置须知通过Nginx 进行网络转 ...
Java操作ftp,上传,下载,删除操作
使用java commons net包中的api可以方便操作ftp操作. import java.io.File; import java.io.FileInputStream; import jav ...
java实现文件上传下载功能
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...
Java 实现Ftp上传下载文件
最近项目中需要实现将文件先存放到ftp上,需要的时候再从ftp上下载,做的过程中碰到了问题,发现中文文件名的无法上传到ftp上,ftp上的中文文件名的文件下载不下来,几番折腾,终于搞定了,记录一下备忘 ...

Java+JavaScript完成上传下载，不需要流处理(不看保证你后悔)

Java+JavaScript完成上传下载，不需要流处理(不看保证你后悔)相关推荐

最新文章

热门文章