今天教大家一个不用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">
一个是文件上传的,一个是上传后解析内容,将内容存储的。细心的朋友看到上面用到lable标签,请不要自行删除,这是我用来做样式的,因为以往input会产生框,现在就不会了,你看:<input id="file_data" name="file_data" type="text" style="display: none;">
更细心的朋友会看到有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") @ResponseBody public 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; } }); }
看到了吧,是不是超级简单,至于你怎么将解析后的数据存库,我不管, 只要能存进去就好。感谢观看。