附件上傳是進行表單操作時經常會用到的功能，下面詳細介紹前臺檔案上傳程式碼的思路，並附最新程式碼。

      首先在前臺我們使用的是jQuery的File Upload元件，該元件以jquery的ajax為基礎，支援多檔案的上傳、取消和刪除，在使用該元件前，需要引入以下檔案：

<script type="text/javascript" src="/${res}/js/jquery-1.9.1.min.js"></script>
<script src="${base}/res/common/js/jquery.ui.widget.js" type="text/javascript"></script>
<script src="${base}/res/common/js/jquery.iframe-transport.js" type="text/javascript"></script>
<script src="${base}/res/common/js/jquery.fileupload.js" type="text/javascript"></script>
 

        在設計檔案上傳時使用按鈕點選上傳，同時上傳的過程中顯示上傳進度，上傳成功後顯示上傳檔案的名稱。當然，對於不同的需求還可以設計更為豐富的上傳介面，但核心機制是相似的。

          上傳前：          上傳後：

<input type="button"  id="patentfileupload" value="上傳" class="but"/>
<input id="patentdocfileupload" style='display:none' type="file" name="Filedata" data-url="../member/o_wlwAttachsUpload.jspx" multiple>			
<input style="width:100px;height:24px;border-width:0px;" class="name" id="patentattachmentNames" name="patentattachmentNames" readonly="true" value>
<input style="width:100px;height:24px;display:none" name="patentattachmentPaths" id="patentattachmentPaths" value>
<input style="width:100px;height:24px;display:none" name="patentUUID" id="patentUUID" value>
<div>
    <span id="patentFileUploadProgress"><span class="bar" style="width:0%"></span></span>
    <span id="barpatentFileUpload" class="progress"></span>
    <a id="delpatentFileUpload" class="del">刪除</a></div>
 

       第一個input作為button用來觸發檔案上傳。第二個input的type為file是檔案上傳的入口，如果支援多檔案上傳，需要在標籤最後加上multiple欄位。其中data-url是檔案上傳的請求地址，經由SpringMVC分發處理器後，進入後臺相應函式實現檔案上傳功能。後面三個input用作展示上傳檔案的檔名稱、路徑和ID值，由於後續表單提交需要獲取上傳檔案相關資訊，所以在這裡將不需要展示的input的樣式設定為display:none，如果你並不需要這些資訊可以直接刪除。這裡還寫了span標籤用於展示上傳進度。最後設定刪除功能，可以使用button或者a標籤，利用onclick事件觸發ajax在後臺刪除指定ID的檔案。

      針對檔案上傳，擴充套件fileupload函式實現一些基本的互動操作。

$('#financialfileupload').click(function(){						
	$('#financialdocfileupload').trigger('click');
})
										
$('#financialdocfileupload').fileupload({
		dataType: 'json',
		add: function (e, data) {
		data.submit();				         
		},
		done: function (e, data) {				         	           
			$("#financialUUID").val(data.result.UUID);
			$("#financialattachmentNames").val(data.result.attachName);
			$("#financialattachmentPaths").val(data.result.attachUrl);
		},
		progressall:function(e,data){
			var progress=parseInt(data.loaded/data.total*100);
			$("#financialFileUploadProgress .bar").css('width',progress+"%");
			$("#barFinancialFileUpload").text(progress+"%");
		}
});

       單擊上傳按鈕，觸發file控制元件的點選事件，彈出檔案上傳選擇彈框，選擇好上傳檔案後點擊確定。針對fileupload函式，這裡簡單介紹幾個基本擴充套件屬性。

       其中dataType:'json'定義接收資料型別為json。回撥函式add在檔案被加入上傳佇列後被呼叫，回撥函式中的data.submit()觸發檔案上傳。當檔案上傳成功後，觸發回撥函式done，在這裡我們取出後臺返回的data（json格式）資料，將其中的檔名稱、路徑和ID值分別賦值給相應名稱的input。另外progressall函式可以顯示所有檔案的總體上傳進度。

      檔案上傳後如果需要刪除，為刪除標籤繫結click事件，單擊刪除後通過ajax將檔案的唯一ID值傳給後臺，後臺根據ID值使用deleteByID函式刪除資料庫中的檔案記錄。

$("#delpatentFileUpload").bind("click",function(){
	$.ajax({
		async:false,
		type:"post",
		url:"../member/o_wlwAttachsDelete.jspx",
		data:{UUID:$("#patentUUID").val()},
		success:function(){
			$("#patentattachmentNames").val('');
			$("#patentattachmentPaths").val('');
			$("#patentFileUploadProgress .bar").css('width',0+"%");
			$("#barpatentFileUpload").text("");
			$("#patentUUID").val('');
			}
		})  
})

      當刪除操作完成後，在success函式中將檔名稱、路徑和ID的值都賦為空字串，頁面恢復為未進行上傳的狀態。

      最後附一小段後臺檔案刪除的程式碼：

CmsFile file=cmsFileMng.findByFileId(UUID);
String path=request.getSession().getServletContext().getRealPath(file.getFilePath());
File fileD=new File(path);
fileD.createNewFile();
cmsFileMng.deleteByFileId(UUID);
fileD.delete();