本文详解在使用SpringMVC、EasyUI与ajaxFileUpload插件进行AJAX文件上传时，因EasyUI重写input ID导致后台接收不到文件的常见问题。通过分析EasyUI源码及jQuery动态获取ID的方法，给出fileElementId的正确配置方式，并结合CommonsMultipartFile实现文件保存。
问题背景与插件选择
在前端使用EasyUI进行界面展示时，遇到了文件上传的需求。由于需要在弹出层中提交表单且要求页面不刷新，最终选择了ajaxFileUpload插件。但在测试过程中发现后台始终无法接收到文件数据，经过排查，问题出在文件输入框的ID上。
首先定义文件上传控件，代码如下：
<input class="easyui-filebox" id="image" name="image" data-options="label:'产品图片:',buttonText:'浏览',prompt:'仅支持jpg、gif、png等格式的图片',required:true">EasyUI文件框ID覆盖机制分析
接着配置AJAX提交逻辑，关键参数如下：
$.ajaxFileUpload({
type:'POST',
url : '${pageContext.request.contextPath}/product/saveProduct',
secureuri : false,
data : queryFormParam('#formId'),//需要传递的数据 json格式
fileElementId :'image',
dataType : 'json',
success : function(data) { //上传成功后的回调。
if(data.status){
$.messager.alert("提示","保存成功");
}else {
$.messager.alert("提示","保存失败");
}
},
error : function(data) {
$.messager.alert("提示","异常，请稍后再试！");
}
});检查代码后发现，当使用EasyUI的filebox组件时，EasyUI的JavaScript库会自动生成一个type="file"的input元素，并为其分配由EasyUI控制的ID，而我们在HTML中自定义的id属性会被覆盖失效。这一点可以在jquery.easyui.min.js的源码中找到依据，相关逻辑如下：
(function($){
var _551=0;
function _552(_553){
var _554=$.data(_553,"filebox");
var opts=_554.options;
opts.fileboxId="filebox_file_id_"+(++_551);
$(_553).addClass("filebox-f").textbox(opts);
$(_553).textbox("textbox").attr("readonly","readonly");
_554.filebox=$(_553).next().addClass("filebox");
var file=_555(_553);
var btn=$(_553).filebox("button");
if(btn.length){
$("<label class=\"filebox-label\" for=\""+opts.fileboxId+"\"></label>").appendTo(btn);
if(btn.linkbutton("options").disabled){
file.attr("disabled","disabled");
}else{
file.removeAttr("disabled");
}
}
};
function _555(_556){
var _557=$.data(_556,"filebox");
var opts=_557.options;
_557.filebox.find(".textbox-value").remove();
opts.oldValue="";
var file=$("<input type=\"file\" class=\"textbox-value\">").appendTo(_557.filebox);
file.attr("id",opts.fileboxId).attr("name",$(_556).attr("textboxName")||"");
file.attr("accept",opts.accept);
if(opts.multiple){
file.attr("multiple","multiple");
}
file.change(function(){
var _558=this.value;
if(this.files){
_558=$.map(this.files,function(file){
return file.name;
}).join(opts.separator);
}
$(_556).filebox("setText",_558);
opts.onChange.call(_556,_558,opts.oldValue);
opts.oldValue=_558;
});
return file;
};解决方案与动态ID获取技巧
表单中若定义多个filebox，EasyUI生成的ID格式为filebox_file_id_加上序号。例如，如果页面中只有一个filebox，其生成的ID即为filebox_file_id_1。针对此情况，只需将ajaxFileUpload插件配置中的fileElementId参数修改为实际的生成ID（如'filebox_file_id_1'），后台即可正常接收到image文件值。
上述结论基于查看源码得出。如果不想依赖源码知识，也可以利用jQuery动态获取该input的id，方法如下：
var image_id= $("input[name='image']").attr("id");由于表单中image字段的name属性是唯一的，我们可以通过jQuery根据name属性获取对应的input元素，进而提取其id，并将该id填入ajaxFileUpload的fileElementId配置中，即可实现与手动指定ID相同的效果。
SpringMVC后端接收与保存
在SpringMVC后端，使用CommonsMultipartFile对象来接收上传的文件。获取到文件对象后，通过调用image.transferTo(saveDir)方法即可将文件保存到指定目录。
@RequestParam("image") CommonsMultipartFile image以上分享了SpringMVC结合EasyUI和ajaxFileUpload实现无刷新文件上传时的关键注意事项，希望能帮助遇到类似问题的开发者。如有疑问欢迎留言，小编会及时回复。感谢大家的支持！