EasyUI上传图片控件的JS/JQ提交取值问题--easyui-filebox

直接正言,有小白遇到一个使用easyUI的上传图片控件easyui-filebox,后台一直取值不到的问题。在这里给新手小白说明下。

现在还有用EasyUI或是其他JqueryUI框架的都知道,使用这些框架都会带有封装好的组件样式。

以easyUI的上传控件file为例,样式为:“easyui-filebox” 如下:

这里自我命名有 id , name ,是不是看着你有两个取值的途径啦。我们再看看页面给我封装好的组件是什么样的(F12自己看):


    
        
            选择文件
        
    
    
    

页面展示好的效果如上述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 对象获取到了
		.....
	}

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

你可能感兴趣的:(easyui)