文件/图片上传功能，简单总结如下

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之文件上传的更多相关文章

  1. ASP.NET MVC5+EF6+EasyUI 后台管理系统（56）-插件---单文件上传与easyui使用fancybox

    系列目录 https://yunpan.cn/cZVeSJ33XSHKZ  访问密码 0fc2 今天整合lightbox插件Fancybox1.3.4,发现1.3.4版本太老了.而目前easyui 1 ...

  2. 基于jQuery Ajax实现无刷新文件上传

    最近因项目需求更改,需要实现选择文件后即时上传至服务器,然后提交后,加载xls表格内容到jqgrid表格中,文件上传功能实现示例: 前端jsp页面: <form id="uploadF ...

  3. jquery.uploadify文件上传组件

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...

  4. 11、Struts2 的文件上传和下载

    文件上传 表单准备 要想使用 HTML 表单上传一个或多个文件 须把 HTML 表单的 enctype 属性设置为 multipart/form-data 须把 HTML 表单的method 属性设置 ...

  5. Java FtpClient 实现文件上传服务

    一.Ubuntu 安装 Vsftpd 服务 1.安装 sudo apt-get install vsftpd 2.添加用户(uftp) sudo useradd -d /home/uftp -s /b ...

  6. 小兔Java教程 - 三分钟学会Java文件上传

    今天群里正好有人问起了Java文件上传的事情,本来这是Java里面的知识点,而我目前最主要的精力还是放在了JS的部分.不过反正也不麻烦,我就专门开一贴来聊聊Java文件上传的基本实现方法吧. 话不多说 ...

  7. ,net core mvc 文件上传

    工作用到文件上传的功能,在这个分享下 ~~ Controller: public class PictureController : Controller { private IHostingEnvi ...

  8. Web开发安全之文件上传安全

    很长一段时间像我这种菜鸡搞一个网站第一时间反应就是找上传,找上传.借此机会把文件上传的安全问题总结一下. 首先看一下DVWA给出的Impossible级别的完整代码: <?php if( iss ...

  9. AutoIt实现Webdriver自动化测试文件上传

    在运用WebDriver进行自动化测试时,由于WebDriver自身的限制,对于上传文件时Windows弹出的文件选择窗口无法控制,通过在网上查找资料锁定使用AutoIt来控制文件上传窗口. Auto ...

随机推荐

  1. Jenkins构建部署jar/war后，服务无法在后台持续运行的解决方案

    jenkins中自动构建helpcenter.jar文件,然后以在server上以shell脚本的形式启动jar服务.jenkins构建后,手动执行sh脚本,服务启动异常.但jenkins结合shel ...

  2. java中几个常见的问题

    1.正确使用equals方法 Object的equals方法容易抛出空指针异常,应使用常量或确定有值的对象来调用equals方法 例如: //不能使用一个值为null的引用类型变量来调用非静态方法,否 ...

  3. 关于css样式加载的问题

    今天我在学习jQuery的addClass操作时遇到了一个小问题,想来跟大家分享一下,避免初学者踩坑. 我的需求是制作一个表格,并让它隔行换色,在此基础上再加上鼠标悬浮变色的效果.(主要训练jQuer ...

  4. Spring Boot2(十四)：单文件上传/下载，文件批量上传

    文件上传和下载在项目中经常用到,这里主要学习SpringBoot完成单个文件上传/下载,批量文件上传的场景应用.结合mysql数据库.jpa数据层操作.thymeleaf页面模板. 一.准备 添加ma ...

  5. Samba与nfs与ftp

    Samba服务 samba是一个网络服务器,用于Linux和Windows之间共享文件. samba端口号 samba (启动时会预设多个端口) 数据传输的TCP端口 139.445 进行NetBIO ...

  6. openlayer 5 获取中心点

    之前在控制台把map对象打印出来后,有一个很像中心点坐标map.focus_.我可以确定的告诉大家,这个不是中心点坐标,检查出来的结果是地图中心最右的点位. 在创建地图时,会将中心点左边写在view中 ...

  7. 巧力避免ViewPager的预加载数据，Tablayout+Fragment+viewPager

    问题描述 最近在进行一个项目的开发,其中使用到了Tablayout+Fragment+viewPager来搭建一个基本的框架,从而出现了设置数据适配器的时候,item的位置错乱问题.我打印log日志的 ...

  8. Surging实践经验

    背景 在去年9月份的时候,我入职一家做航空软件产品的公司.当时公司部门领导决定构建一个技术平台(或称为技术中台),通过该技术平台进而孵化各个业务系统.说白了就是需要通过一个分布式框架或是微服务框架提高 ...

  9. dll附加依赖项查看——dumpbin 命令

    VS自带工具 查看程序或动态链接库需要的动态链接库 dumpbin /dependents d:\test.exe 查看动态链接库的输出函数 dumpbin /exports d:\libmysql. ...

  10. WebGL中深度碰撞方法总结

    z-fighting问题是三维渲染中常见的问题,本文根据实际工作中遇到的一些场景,进行了系统的总结 一个实际工作中的问题 当两个面离得太近就会发生深度碰撞问题,比如: 遇到深度检测问题,最重要的是先搞 ...