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 对象获取到了
		.....
	}

注：搞个前后端分离吧。实在话就是我也不喜欢写页面，框架也懒得用，把他送给前端小伙伴最好，耶耶耶。。。