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定义类或函数的几种方式小结
Jan 09 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 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
一个查看session内容的函数
2006/10/09 PHP
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
js 单引号 传递方法
2009/06/22 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
js函数的引用, 关于内存的开销
2012/09/17 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
javascript实现俄罗斯方块游戏的思路和方法
2015/04/27 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
angular2使用简单介绍
2016/03/01 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
python多重继承实例
2014/10/11 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
SQL里面IN比较快还是EXISTS比较快
2012/07/19 面试题
财务经理的岗位职责
2013/12/17 职场文书
同学会邀请书大全
2014/01/12 职场文书
音乐器材管理制度
2014/01/31 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
SQL Server中使用表变量和临时表
2022/05/20 SQL Server