EasyUI上傳圖片控件的JS/JQ提交取值問題--easyui-filebox

直接正言，有小白遇到一個使用easyUI的上傳圖片控件easyui-filebox，後臺一直取值不到的問題。在這裏給新手小白說明下。

現在還有用EasyUI或是其他JqueryUI框架的都知道，使用這些框架都會帶有封裝好的組件樣式。

以easyUI的上傳控件file爲例，樣式爲：“easyui-filebox” 如下：

<input id="modelCover" name="uploadFile" class="easyui-filebox" style="width:200px"/>

這裏自我命名有 id , name ，是不是看着你有兩個取值的途徑啦。我們再看看頁面給我封裝好的組件是什麼樣的（F12自己看）：

<span class="textbox filebox" style="width: 198px; height: 20px;">
    <a href="javascript:void(0)" class="textbox-button textbox-button-left l-btn l-btn-small" group="" id="" style="height: 20px; left: 0px;">
        <span class="l-btn-left" style="margin-top: -2px;">
            <span class="l-btn-text">選擇文件</span>
        </span>
    </a>
    <input type="text" class="textbox-text validatebox-text" autocomplete="off" placeholder="" readonly="readonly" style="margin-left: 57px; margin-right: 0px; padding-top: 3px; padding-bottom: 3px; width: 133px;">
    <input type="file" class="textbox-value" name="uploadFile">
</span>

頁面展示好的效果如上述html代碼，看到最下面 type="file" 的input麼，沒有ID哦，只有name，所以一向喜歡用 id取值的朋友，你們是拿不到對象的，換成name就行。

這裏不採用表單上傳方式，使用事件進行ajax提交，如下：

$(function(){
	// 省級 
	$('#modelCover').filebox({
		buttonText: '選擇文件',
                buttonAlign: 'left',
	        onChange:function(data){
	    	var imgForm = new FormData();
	    	var imgFileObj = $('input[name="uploadFile"]')[0].files[0];//拿到值咯，噢耶
	    	imgForm.append("uploadFile",imgFileObj);
	    	$.ajax({
	    		type: "post",
	    		url: "/image/upLoadPicture",
	    		contentType: 'application/x-www-form-urlencoded;charset=utf-8',
	    		dataType: "json",
	    		async:false,
	    		contentType : false,
	    		processData : false,	//是否轉化爲字符串
	    		data: imgForm,
	    		success: function(result) {
	    		    if (result.code == "1") {
	    		        alert("上傳文件成功！" + result.msg);
	    		    }
	    		},
	    		error: function(data, status, e) {
	    		    alert("文件上傳失敗!");
	    		}
	    	 });
	    }
	});

});

這樣後臺獲取對象。

        @RequestMapping(value = "/image/upLoadPicture", method = RequestMethod.POST)
	@ResponseBody
	public JSONObject upLoadPicture(MultipartFile uploadFile) {

		//uploadFile 對象獲取到了
		.....
	}

注：搞個前後端分離吧。實在話就是我也不喜歡寫頁面，框架也懶得用，把他送給前端小夥伴最好，耶耶耶。。。