今天教大家一個不用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會産生框，現在就不會了，你看：
Java+JavaScript完成上傳下載下傳，不需要流處理(不看保證你後悔)
更細心的朋友會看到有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裡，然後送出表單時，帶過來。
下面讓大家看看，我一直提到的解析的資料是個什麼鬼:
Java+JavaScript完成上傳下載下傳，不需要流處理(不看保證你後悔) Java+JavaScript完成上傳下載下傳，不需要流處理(不看保證你後悔)
控制台從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;
}
});
}
看到了吧，是不是超級簡單，至于你怎麼将解析後的資料存庫，我不管， 隻要能存進去就好。感謝觀看。