JQGrid之文件上传
文件/图片上传功能，简单总结如下
1.引入ajaxfileupload.js
注意：该文件需要在引入Jquery之后引入
下载链接：https://i.cnblogs.com/Files.aspx
2.colModel中文件上传name设置
{name:'cover',index:'cover',edittype:"file",editable:true,editoptions: {enctype: "multipart/form-data"},
formatter:function (value,option,rows) {
return "<img style='width:30%;height:10s%;' src='${pageContext.request.contextPath}/image/"+rows.cover+"'/>";
}},
3.前台编码
<%@page pageEncoding="UTF-8" contentType="text/html; utf-8" isELIgnored="false" %>
<html>
<link rel="stylesheet" href="statics/boot/css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="statics/jqgrid/css/trirand/ui.jqgrid-bootstrap.css" type="text/css">
<script src="statics/boot/js/jquery-2.2.1.min.js" type="text/javascript"></script>
<script src="statics/boot/js/bootstrap.min.js" type="text/javascript"></script>
<script src="statics/jqgrid/js/trirand/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="statics/jqgrid/js/trirand/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="statics/jqgrid/js/ajaxfileupload.js" type="text/javascript"></script> <script>
$(function () {
$('#tt').jqGrid({
url:'${pageContext.request.contextPath}banner/showBanners',
datatype:'json',
styleUI:'Bootstrap',
//cellEdit:true,
multiselect:true,
colNames:['编号', '名称', '图片', '描述', '状态','创建时间'],
collEdit:true,
colModel:[
{name:"id",align:'center',hidden:true},
{name:'title',align:'center',editable:true},
{name:'cover',index:'cover',edittype:"file",editable:true,editoptions: {enctype: "multipart/form-data"},
formatter:function (value,option,rows) {
return "<img style='width:30%;height:10s%;' " +
"src='${pageContext.request.contextPath}/image/"+rows.cover+"'/>";}},
{name:'description',align:'center',editable:true},
{name:'status',align:'center',editable:true,edittype:"select",
editoptions:{value:"正常:正常;冻结:冻结"}},
{name:'create_date',align:'center',formatter:"date",formatoptions:{scrformat:'Y-m-d H:i:s',newformat:'Y-m-d'}}
//格式化参考：http://www.cnblogs.com/hxling/archive/2010/10/10/1847334.html
],
pager:'#pager',
autowidth:true,
height:'60%',
rowNum : 3,
rowList : [2,3,4,5],
caption : "轮播图的详细信息",
editurl:'${pageContext.request.contextPath}/banner/oper',//设置编辑表单提交路径
viewrecords : true,
//recreateForm: true确保每添加或编辑表单是重新创建。
}).navGrid('#pager',{edit : true,add : true,del : true,search:false}, {
jqModal:true,closeAfterAdd: true,recreateForm:true,onInitializeForm : function(formid){
$(formid).attr('method','POST');
$(formid).attr('action','');
$(formid).attr('enctype','multipart/form-data');
},
afterSubmit:function (response) {
var status = response.responseJSON.status;
var id = response.responseJSON.message;
alert("确认修改")
if(status){
$.ajaxFileUpload({
url:"${pageContext.request.contextPath}/banner/upload",
fileElementId:"cover",
data:{id:id},
type:"post",
success:function () {
$("#tt").trigger("reloadGrid")
}
});
}
}
}, {
jqModal:true,closeAfterEdit: true,recreateForm:true,onInitializeForm : function(formid){
$(formid).attr('method','POST');
$(formid).attr('action','');
$(formid).attr('enctype','multipart/form-data');
},
afterSubmit:function (response) {
var status = response.responseJSON.status;
var id = response.responseJSON.message;
alert("确认添加")
if(status){
$.ajaxFileUpload({
url:"${pageContext.request.contextPath}/banner/upload",
fileElementId:"cover",
data:{id:id},
type:"post",
success:function () {
$("#tt").trigger("reloadGrid")
}
});
}
}
}
);
})
</script>
<body>
<table id="tt"></table>
<div id="pager" style="height: 30px"></div>
</body>
</html>
前台代码
4.后台编码
public void upload(String id, MultipartFile cover) throws IOException {
//需要在submit之后进行一次图片路径的修改
Banner banner = new Banner();
log.info("上传图片的原始名字"+cover.getOriginalFilename());
String realPath =httpSession.getServletContext().getRealPath("image");
cover.transferTo(new File(realPath,cover.getOriginalFilename()));
banner.setId(id);
banner.setCover(cover.getOriginalFilename());
bannerDAO.updateByPrimaryKeySelective(banner);
}
后台代码
JQGrid之文件上传的更多相关文章
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（56）-插件---单文件上传与easyui使用fancybox
系列目录 https://yunpan.cn/cZVeSJ33XSHKZ 访问密码 0fc2 今天整合lightbox插件Fancybox1.3.4,发现1.3.4版本太老了.而目前easyui 1 ...
- 基于jQuery Ajax实现无刷新文件上传
最近因项目需求更改,需要实现选择文件后即时上传至服务器,然后提交后,加载xls表格内容到jqgrid表格中,文件上传功能实现示例: 前端jsp页面: <form id="uploadF ...
- jquery.uploadify文件上传组件
1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...
- 11、Struts2 的文件上传和下载
文件上传 表单准备 要想使用 HTML 表单上传一个或多个文件 须把 HTML 表单的 enctype 属性设置为 multipart/form-data 须把 HTML 表单的method 属性设置 ...
- Java FtpClient 实现文件上传服务
一.Ubuntu 安装 Vsftpd 服务 1.安装 sudo apt-get install vsftpd 2.添加用户(uftp) sudo useradd -d /home/uftp -s /b ...
- 小兔Java教程 - 三分钟学会Java文件上传
今天群里正好有人问起了Java文件上传的事情,本来这是Java里面的知识点,而我目前最主要的精力还是放在了JS的部分.不过反正也不麻烦,我就专门开一贴来聊聊Java文件上传的基本实现方法吧. 话不多说 ...
- ,net core mvc 文件上传
工作用到文件上传的功能,在这个分享下 ~~ Controller: public class PictureController : Controller { private IHostingEnvi ...
- Web开发安全之文件上传安全
很长一段时间像我这种菜鸡搞一个网站第一时间反应就是找上传,找上传.借此机会把文件上传的安全问题总结一下. 首先看一下DVWA给出的Impossible级别的完整代码: <?php if( iss ...
- AutoIt实现Webdriver自动化测试文件上传
在运用WebDriver进行自动化测试时,由于WebDriver自身的限制,对于上传文件时Windows弹出的文件选择窗口无法控制,通过在网上查找资料锁定使用AutoIt来控制文件上传窗口. Auto ...
随机推荐
- struts2入门Demo
一.引入必要的jar包,所需jar包如下: 二.配置web.xml.主要目的是拦截请求 <?xml version="1.0" encoding="UTF-8&qu ...
- 腾讯架构师分享的Java程序员需要突破的技术要点
一.源码分析 源码分析是一种临界知识,掌握了这种临界知识,能不变应万变,源码分析对于很多人来说很枯燥,生涩难懂. 源码阅读,我觉得最核心有三点:技术基础+强烈的求知欲+耐心. 我认为是阅读源码的最核心 ...
- C语言学习书籍推荐《C Primer Plus(中文版)(第5版)》下载
普拉塔 (Prata S.) (作者), 云巅工作室 (译者) <C Primer Plus(中文版)(第5版)>共17章,介绍了C语言的基础知识,包括数据类型.格式化输入输出.运算符.表 ...
- 免费rar/zip解压缩工具BandZip
今天为大家推荐一款解压缩类软件--BandZip bandzip是我认为的最好用的解压缩软件,速度快没广告 能够秒杀其他的压缩类软件 下载地址 bandzip点我 1 BandZip简介 BandZi ...
- [转载] 管Q某犇借的手写堆
跟gxy大神还有yzh大神学了学手写的堆,应该比stl的优先队列快很多. 其实就是维护了一个二叉堆,写进结构体里,就没啥了... 据说达哥去年NOIP靠这个暴力多骗了分 合并果子... templat ...
- MyBatis从入门到精通：select较深层次的用法
一,简单的情形 需求: 根据用户id获取用户拥有的所有角色,返回的结果为角色集合. 1.接口中增加的方法: List<SysRole> selectRolesByUserId(Long u ...
- Java编程思想：通配符（后面有两个小节，研究的不够深入）
import java.util.*; public class Test { public static void main(String[] args) { } } /* 15.9 边界 要点: ...
- 快速掌握mongoDB(三)——mongoDB的索引详解
1 mongoDB索引的管理 本节介绍mongoDB中的索引,熟悉mysql/sqlserver等关系型数据库的小伙伴应该都知道索引对优化数据查询的重要性.我们先简单了解一下索引:索引的本质就是一个排 ...
- Android/AndroidStudio/idea使用教程之git使用（详细）（码云）
已经安装好了AndroidStudio,安装教程 本教程是作者自己摸索出来的,有不足之处还请大家海涵.多多拍砖,互相学习. 第一步:下载git,安装git客户端 直接百度git,下载git 安装g ...
- tablayout_不能左右滑动问题小计
<android.support.design.widget.TabLayout android:id="@+id/tab_pic" android:layout_width ...