Java實現(xiàn)前端上傳文件,和后臺交互將保存到服務器的路徑回顯

作為一個后端,雖然說一直都是在趟坑,但是真的是后端的坑一趟就過,但是前端的坑真的是不好踩,先說一下需求,總體實現(xiàn)上傳一個Form表單,實現(xiàn)添加或者修改信息,Form表單中有一個圖標,實現(xiàn)異步上傳圖標(文件什么的都可以都是類似的),然后將文件保存到服務器,然后將保存的路徑回顯回前端,然后提交表單,實現(xiàn)將圖標保存的路徑保存到數(shù)據(jù)庫.

這是使用框架的組件實現(xiàn)的效果

我只說一下實現(xiàn)文件上傳這一部分吧,因為Form表單提交保存數(shù)據(jù)庫這是最基本的操作了;
第一種方法:使用前端operamasks-ui框架,后端使用的是play框架
首先是HTML代碼:
<div id="dialog-form">
????<form id="ipForm">
????<input type="hidden" name="idd" value="" />
????????<table>
????????????<tr>
????????????????<td>        標題：</td>
????????????????<td><input name="title" /></td>
????????????</tr>
? ? ? ? ? ? .......
? ??????????<tr>
????????????????<td>        狀態(tài)：</td>
????????????????<td>
? ? ? ? ? ? ? ? ? ? <input id="zc" type="radio" name="status" value="0" checked="checked" />
? ? ? ? ? ? ? ? ? ? ? <label>正常</label>  
? ? ? ? ? ? ? ? ? ? ? <input id="xx" type="radio" name="status" value="-1"/>
? ? ? ? ? ? ? ? ? ? ? <label>下線</label>
????????????????</td>
????????????</tr>
????????????????????其余的是一樣的,下面寫一下上傳圖標的input
????????????<tr>
????????????????<td>        圖標路徑：</td>
????????????<td>
????????????????????<input id="upload_icon_url" name="upload_icon_url" placeholder="此處顯示圖標路徑" readonly="readonly"/><br>
????????????</td>
????????</tr>
? ? ? ? <tr>
? ? ? ? ????<td>        上傳圖標：</td>
????????????<td>
????????????????<div>
????????????????????
? ??????????????這個是使用ajax上傳的時候可以使用accept屬性來限制上傳圖片的類型,
? ??????????????也可以使用image/*來支持所有類型的上傳
? ? ? ? ? <input id="upload_icon" name="upload_icon" type="file" style="width:182px;" />
? ? ??????????
? ? ? ? <input type="button" value="點擊上傳"onclick="$('#upload_icon').omFileUpload('upload');"/
? ? 
? ? ? ? ? ? ? ? ? ?</div>? ? ? ? ??
????????????????</td>
????????????</tr>
????????</table>
????</form>
</div>
下面就說一下這個omFileUpload方法:
這個方法要寫在$(document).ready( function() {}中實現(xiàn)加載頁面的時候就將其初始化完成:
$(document).ready( function() {
? ??/* 直接上傳文件,并判斷大小和類型 */
????$('#upload_icon').omFileUpload({
????????action:'/SmartProduct/UploadIcon',
????????//文件上傳與后臺交互的路徑(相當于ajax請求的url)
????????swf : '/public/javascripts/operamasks-ui-1.2/swf/om-fileupload.swf',
? ? ? ? //文件上傳的位置(服務器)
????????fileExt:'*.jpg;*.png;*.jpeg',? ? //限制上傳圖片的類型
????????fileDesc:'Image Files',? ? //如果是上傳資源文件可以使用Resource Files
????????method: 'POST',? ? ? ? //請求方式
????????sizeLimit : 1024*1024,? ? //限制上傳文件的大小? ? ? ? ? ? ? ????????onComplete:function(ID,fileObj,response,data,event){? ?
????????????//這個是上傳完成觸發(fā)的一個事件
????????????if(response!=null&&response.length>0){? ? ?//參數(shù)含義寫到下面吧
????????????????$('#upload_icon_url').val(response);
????????????}
????????}
????});
}
參數(shù):ID- 文件ID
fileObj- 封裝了文件的信息的Object對象恳不，包含五個屬性：name(文件名)，size(文件大小)，creationDate(文件創(chuàng)建時間)，modificationDate(文件最后修改時間)灵迫，type(文件類型)
response- 服務端返回的內容
data- 封裝了文件上傳信息的Object對象，包含兩個屬性：fileCount(文件上傳隊列中剩余文件的數(shù)量)仰美，speed(文件上傳的平均速度 KB/s)
event- jQuery.Event對象妻率。

到此這個click事件就可以了,還有一些為按鈕添加圖標啊,對表格進行校驗啊狀態(tài)的單選啊,使用區(qū)域和運營商的下拉選啊等等和本次無關的的代碼就不寫了,寫一下實現(xiàn)內容回填的代碼:

//[新增/修改]dialog初始化
var dialog = $("#dialog-form").omDialog({? ? ? ??
????width : 460,? ? ? ? ? ? ? ? //這里是將Form表單提交的按鈕進行初始化操作
????autoOpen : false,? ?//至于omDialog是一個對話框的組件,可以設置模態(tài)框口等等操作
????modal : true,? ? ? ? ? ? ? ? 就不細說了,因為這個是框架的東西說起來真的太多了說不完的
????resizable : false,
????buttons : {
????????"提交" : function() {
????????????submitDialog();
????????????return false; //阻止form的默認提交動作
????????},
????????"取消" : function() {
????????????$("#dialog-form").omDialog("close");//關閉dialog
????????}
????}
});

//填充 [新增/修改]dialog并初始化里面的輸入框的數(shù)據(jù) ！Ｃ讼贰Ｐ髅谩！
var showDialog = function(title, idd) {? ? ? ?//傳入idd以便知道操作的是哪一條數(shù)據(jù)
????validator.resetForm();? ? ? ? ? ? ? ? ? ? ? ? ? ?//將表單reset
????if(idd!=null){????//edit info;? ? ? ? ? ? ? ? ? ? //如果idd不為null說明是要進行修改操作,則要去數(shù)據(jù)庫獲取數(shù)據(jù)來進行,數(shù)據(jù)回填到表格,以便用戶進行數(shù)據(jù)的修改,為null則直接將空表單顯示給用戶進行填寫
????????var uri = "/SmartProduct/Get/"+idd;? ? //這個是訪問的數(shù)據(jù)源(后端調用方法的路徑)
????????$.get(uri,function(response){
????????????if(response!=null){? ? ? ? //獲取響應對象的屬性信息進行回填表格
????????????????$("input[name='idd']", dialog).val(response.idd);
????????????????$("input[name='title']", dialog).val(response.title);
????????????????$("input[name='yys']", dialog).val(response.yys);
????????????????$("input[name='yys']", dialog).omCombo("value",response.yys);
? ? ? ? ? ????? //.....中間的代碼都是一樣的,下面是關鍵的回填url數(shù)據(jù)的地方? ? ? ? ? ? ? ? ? ? ????????????????$("input[name='upload_icon_url']", dialog).val(response.icon);
? ? ? ? ? ? ? ? //這里是將數(shù)據(jù)回填到之前定義好的用來接收url的input中
? ? ? ? ? ????? //.....
????????????}
????????});
????}
????dialog.omDialog("option", "title", title);
????dialog.omDialog("open");//顯示dialog
};
//[新增/修改]dialog中點提交按鈕時將數(shù)據(jù)提交到后臺并執(zhí)行相應的add或modify操作Ｊ辆俊Ｓ士酢！蝇摸！
var submitDialog = function() {
????if (validator.form()) {
????????var submitData = {
????????????operation : isAdd ? 'add' : 'modify',
????????????????idd : $("input[name='idd']", dialog).val(),
? ? ? ? ? ? ? ? title : $("input[name='title']", dialog).val(),
? ? ? ? ? ? ? ? //...............中間的代碼一樣
? ??????????????//更新單選框（狀態(tài)）中選中的值
? ??????????????status : $("input[name='status']:checked").val(),
? ??????????????icon : $("input[name='upload_icon_url']", dialog).val(),
????????????????//這里獲取之前放入的url信息
? ? ? ? ? ? };
????????????$.post('/SmartProduct/Modify', submitData, function() {
????????????????//將整個form進行post提交
????????????????if (isAdd) {
????????????????????$('#mygrid').omGrid('reload', 1);//如果是添加則滾動到第一頁并刷新? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $.omMessageTip.show({? ?
????????????????????//omMessageTip也是一個組件,相當許ajax中的success方法
????????????????????????title : "操作成功",
????????????????????????content : "添加數(shù)據(jù)成功",
????????????????????????timeout : 1500
????????????????});
????????????} else {
????????????????$('#mygrid').omGrid('reload');//如果是修改則刷新當前頁
????????????????$.omMessageTip.show({
????????????????????title : "操作成功",
????????????????????content : "修改數(shù)據(jù)成功",
????????????????????timeout : 1500
????????????????});
????????????}
????????????$("#dialog-form").omDialog("close"); //關閉dialog
????????});
????}
};
以上就是所有文件上傳相關有效代碼,下面寫一下后臺交互的代碼:
//上傳圖標uploadIcon
public static Result uploadIcon(){
????ReturnMessage returnMessage = new ReturnMessage();? ?
????//這個是我自己定義的一個返回對象(包含返回狀態(tài)碼和狀態(tài)信息,你們也可以自己定義一個實體類)
????MultipartFormData uploadImage = request().body().asMultipartFormData();? ?
? ? //這個是從請求頭中獲取FormData對象,因為ajax請求上傳對象要將FormData對象封裝到請求頭
????if(uploadImage!=null){
????????List<FilePart> fileList = uploadImage.getFiles();
//這里也可以使用FilePart file = upload.getFile(" ");//括號里傳一個key
//這個key是前端創(chuàng)建好FormData對象以后可以使用append方法以key value形式往里添加文件對象
//這個不知道可以去百度搜一下Ajax上傳文件FormData對象的使用,這里真的不細說了
//可以參考一個https://blog.csdn.net/qq_41802303/article/details/80066160
//還有FormData的API文檔https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
????????for(FilePart file:fileList){
????????????if(file!=null){
????????????????String imagePath = ImageUploadUtil.putImg(file, "IPI");
????????????????returnMessage.setCode("1");
????????????????returnMessage.setMessage("上傳成功");
????????????????return ok(imagePath);? ? //將圖片的路徑返回
? ? ? ?????}
????????}
????}
????returnMessage.setCode("0");
????returnMessage.setMessage("上傳的圖標無效(null)");
????return ok(Json.toJson(returnMessage));
}
下面是另一種方法,就是單純的使用Ajax請求和JQuery來實現(xiàn):(后臺的代碼是一樣的)

這個是使用Ajax實現(xiàn)的效果

這里簡單說一下實現(xiàn)思路,HTML代碼將上傳圖標的部分提出來單獨放到一個Form表單中,以便進行單獨的提交.下面是我簡單實現(xiàn)的一些代碼婶肩，下面的就不細說了,你們可以參考一下:
function checkFile(){
????// 獲取文件對象(該對象的類型是[object FileList]，其下有個length屬性)
????var fileList = $('#upload_icon')[0].files;
????// 如果文件對象的length屬性為0貌夕，就是沒文件
????if (fileList.length === 0) {
????????console.log('沒選擇文件');
????????return false;
????};
????return fileList[0];
};

// 文件選擇成功律歼，顯示文件名稱
$('#upload_icon').change(function(){
????var file = checkFile();
????if (!file) {
????????return false;
????};
????var name = $('#upload_icon')[0].files[0].name;
????$('#upload_icon').text(name);
?});
$("input[name='upload_icon_button']").click(function(){
????var file = checkFile();
????if (!file) {
????????alert('請先選擇圖標');
????????return false;
????};

????// 構建form數(shù)據(jù)
????var formFile = new FormData();
????formFile.append("action", "UploadPath");
????//把文件放入form對象中
????formFile.append('file', $('#upload_icon')[0].files[0]);
????//這個是我打印輸出進行查看上傳文件信息的
????console.log('formFile:'+formFile+"fileName:"+$('#upload_icon')[0].files[0].name); ????$('#upload_icon').omFileUpload('upload',0);
????$.ajax({
????????url : "/SmartProduct/UploadIcon";
????????type : "POST",
????????data : formFile,
????????dataType : "json",
????????processData : false,? ? //這兩個是必須填寫的
????????contentType: false,????//這兩個是必須填寫的
???????traditional:true,? ??
????????cache : false,
????????success : function(data) {
????????????if(data.code==1){
????????????????$('#upload_icon_url').val(data);? ? //將返回的值回填到input中
????????????????alert('上傳成功!');
????????????}else{
? ? ? ? ????????console.log("errorMessage:"+data.message);
? ? ? ? ? ? ????$.omMessageTip.show({
? ? ? ? ????????????type:"error",
????????????????????content:data.message,
????????????????????timeout : 1500
? ? ? ? ? ? ????});
? ? ? ? ????}
? ? ????}
????});
});
OK,到這里就是最關鍵的了,可能有的人和我一樣還是不行,我之前一直以為代碼寫錯了,后來才知道,原來是上傳文件需要安裝Flash插件并允許Chrome使用Flash插件,否則,他不會跳出選擇文件的對話框,這是一個賊大的坑,哎.

Chrome瀏覽器可以點擊這個logo進行設置flash等插件的權限

Flash插件可以之間去官網(wǎng)下載對應系統(tǒng)的版本就行,還有就是Chrome可以在url中輸入chrome://components/進行Flash版本檢查,瀏覽器要進行權限設置可以參考https://jingyan.baidu.com/article/f96699bbf3ec88894e3c1bbb.html
可能寫的不是很全面也可能有寫錯的地方,因為涉及的東西太多要寫的也太多,只是簡單的分享一下,希望對你們有幫助!如果還是不行就私聊我,我?guī)湍阏艺覇栴},一定幫你解決;