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

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

看下数据库:

Java 下载文件不全导致不能打开_上传下载

Java 下载文件不全导致不能打开_上传下载_02



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;">
$(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);
}
//文件上传
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) {  
	    }  
	}); 
}
@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 "上传失败!";
	}
//文件下载
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;
		}
	});
}