springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项


Posted in Javascript onApril 23, 2017

在使用easyUI做前端样式展示时,遇到了文件上传的问题,而且是在弹出层中提交表单,想做到不刷新页面,所以选择了使用ajaxFileUpload插件。提交表单时一直发现后台接收不到文件,后检查发现,原来是文件的id不对。

文件上传框我们定义如下:

<input class="easyui-filebox" id="image" name="image" data-options="label:'产品图片:',buttonText:'浏览',prompt:'仅支持jpg、gif、png等格式的图片',required:true">

提交的方式如下:

$.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的js会为其创建一个type="file"的input,并且id也是easyUI定义的,自定义的id无效,可在easyUI的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;
};

表单中可以定义多个filebox,并且filebox的id为filebox_file_id_+序号,如果只有一个,那就是filebox_file_id_1,因我这边只有一个,然后将ajaxFileUpload提交时的fileElementId 改成‘filebox_file_id_1',后台就接收到image值了。

这个是看源码知道的,如果不看源码,其实可以直接用jQuery的方式获得id,如下:

var image_id= $("input[name='image']").attr("id");

因image名字在我的表单中是唯一的,所以通过名字来获得id,然后将id填入ajaxFileUpload的fileElementId 中即可达到同样的效果。

springMVC后台采用的是CommonsMultipartFile来接收文件,如下,得到路径后,用image.transferTo(saveDir);保存即可。

@RequestParam("image") CommonsMultipartFile image

以上所述是小编给大家介绍的springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
从JavaScript的函数重名看其初始化方式
Mar 08 Javascript
jquery中ajax学习笔记一
Oct 16 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
react实现点击选中的li高亮的示例代码
May 24 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 #Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 #Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 #Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 #Javascript
Vue.use源码分析
Apr 22 #Javascript
uploader秒传图片到服务器完整代码
Apr 22 #Javascript
Node.js中看JavaScript的引用
Apr 22 #Javascript
You might like
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
PHP积分兑换接口实例
2015/02/09 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
vue.js 上传图片实例代码
2017/06/22 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
jQuery实现手势解锁密码特效
2017/08/14 jQuery
Vue实现一个图片懒加载插件
2019/03/11 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
[55:16]Mski vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python解析json实例方法
2013/11/19 Python
python处理json数据中的中文
2014/03/06 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
大学毕业寄语大全
2014/04/10 职场文书
小学生寒假家长评语
2014/04/16 职场文书
琅琊山导游词
2015/02/05 职场文书
环境卫生标语
2015/08/03 职场文书
安全教育的主题班会
2015/08/13 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
Java获取字符串编码格式实现思路
2022/09/23 Java/Android