easyui 行编辑中上传附件

前段时间写的一个系统需要实现在行编辑中上传附件的功能，最开始使用< input type=”file” />,但是提交表单的时候无法获取标签中的内容。后来使用先上传附件的方法实现这个功能。

使用技术：springMVC easyui ajax

思路大致如下：在行编辑中写一个链接，如“上传”、“附件”等等，点击链接弹出上传附件的页面，上传附件后后台处理，把路径传回jsp并接收，更新路径到行编辑中。后台读取有改变的行的数据，更新到数据库。

1、编写可编辑行表格

 <table id="mydatagrid" style="width:800px"></table>         <script>$('#mydatagrid').datagrid({toolbar:'#tb',nowrap: false,striped: true,collapsible:true,url:'<%=request.getContextPath()%>/apps/appTest.do?method=json&id=${appTest.id}',remoteSort: false,singleSelect:true,idField:'id',columns:[[{title:'文本1',field:'text1', width:120,align:'center',editor : {type :"validatebox",options : {  required: true}}},               {title:'文本2(提示内容)',field:'text2', width:140,align:'center',editor : {type :"validatebox",options : {  required: true,missingMessage:'这里写提示内容'}}},{title:'数字',field:'number1', width:80,align:'center',editor : {type :"numberbox",options : {  required: true ,min:0,validType:'number',missingMessage:'请输入数字'}}},          {title:'路径',field:'filePath',hidden:true, width:100,align:'center',editor : {type :"validatebox",options : {  }}},   {title:'附件',field:'file',width:180,align:'center',formatter:function (value, row, index) {if(row.resultFile != "" && row.resultFile != null) {var arr = row.resultFile.split('\\');var resultFileName = arr[arr.length-1];var download = "<a href='<%=request.getContextPath()%>/apps/appTest.do?method=download&filepath="+row.filePath+"'>"+下载+"</a>";                      var upload = "<a href='#' onclick='addFile("+index+");'>上传</a>";return download+"<br>"+upload;}else{                      var str = "<a href='#' onclick='addFile("+index+");'>上传</a>";return str;}}}]],pagination:false,onDblClickRow: onRowClick });function onRowClick(rowIndex, row){$('#mydatagrid').datagrid('beginEdit', rowIndex);}           function addNew(){$('#mydatagrid').datagrid('endEdit', lastIndex);       $('#mydatagrid').datagrid('appendRow');        var lastIndex = $('#mydatagrid').datagrid('getRows').length-1;$('#mydatagrid').datagrid('selectRow', lastIndex);$('#mydatagrid').datagrid('beginEdit', lastIndex);}function endEdit(){var rows = jQuery("#mydatagrid").datagrid('getRows');  for ( var i = 0; i < rows.length; i++) {  jQuery("#mydatagrid").datagrid('endEdit', i);}       }function deleteSelections(){endEdit();var rows = jQuery('#mydatagrid').datagrid("getSelections"); if(rows == null || rows.length <=0){jQuery.messager.alert("info","请选中一行!", "info");return;}var copyRows = [];for ( var j= 0; j < rows.length; j++) {copyRows.push(rows[j]);}for(var i =0;i<copyRows.length;i++){    var index = jQuery('#mydatagrid').datagrid('getRowIndex',copyRows[i]);jQuery('#mydatagrid').datagrid('deleteRow',index); }}
function addFile() {//打开上传附件页面时需要先将行编辑结束编辑，否则更新路径回行编辑页面时会把其他内容清空endEdit();  var link = '<%=request.getContextPath()%>/apps/appTest.do?method=addFile;jQuery.layer({type: 2,shade: [0.5, '#000'],fix: false,title: '上传附件',iframe: {src : link},area: ['340px' , '180px']}); }</script>

2、上传附件upload.jsp

<%@ page contentType="text/html;charset=UTF-8" %><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" charset="utf-8">var contextPath="<%=request.getContextPath()%>";function saveData(){var params = jQuery("#iForm").serializeJson();  var isValid = $("#iForm").form('validate');//通过ajax异步提交表单，提交成功后后台返回data$.ajaxFileUpload({type:"POST",url:'<%=request.getContextPath()%>/apps/appTest.do?method=uploadFile',data:params,dataType:'json',fileElementId:['uploadFile'],error:function(data){alert('提交失败');},success:function(data){if(data != null && data.message != null){parent.layer.alert(data.message, 1);} else {parent.layer.alert('操作成功！', 1);}//接收返回的filePathvar file = JSON.stringify(data.filePath);var filePath = file.replace(/\"/g,"");//使用updateRow将filePath更新回父页面，即行编辑的页面parent.$('#mydatagrid').datagrid('updateRow', { index:${index} , row: { filePath: filePath} });closeDiv();}});}function closeDiv(){var index = parent.layer.getFrameIndex(window.name);parent.layer.close(index);  }</script>
</head><body style="margin:5px;">
<div class="easyui-layout" data-options="fit:true">  <div data-options="region:'center',border:false,cache:true"><form id="iForm" name="iForm" method="post"><input type="hidden" id="id" name="id" value=""/><table class="easyui-form" style="width:300px;" align="center">    <tr>        <td align="left"><input name="uploadFile" type="file" id="uploadFile"/></td>           </tr><tr><td colspan="4" align="center"><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="javascript:saveData();" >保存</a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="javascript:closeDiv();" >关闭</a></td></tr>   </table></form>
</div>
</div>
</body>
</html>

3、上传附件的jsp文件中使用ajax异步提交表单，上传成功后后台返回上传的路径到前端

    @RequestMapping(params = "method=uploadFile")@ResponseBodypublic byte[] uploadFile(@RequestParam("uploadFile") CommonsMultipartFile file)throws IOException {JSONObject jsonObject = new JSONObject();String path = "";try {// 上传文件//取得文件名fileName = file.getOriginalFilename()+"_"+new Date().getTime();// 获得上传附件的服务器端路径.path = request.getSession().getServletContext().getRealPath("/upload");// 创建文件类型对象:File newFile=new File(path+"/"+fileName);//通过CommonsMultipartFile的方法直接写文件file.transferTo(newFile);//保存在数据库中的相对路径String filePath = "upload/"+fileName;jsonObject.put("filePath", filePath);} catch (Exception e) {e.printStackTrace();}return jsonObject.toString().getBytes("UTF-8");}

easyui 行编辑中上传附件相关推荐

mooc作业怎么上传附件_适合团队协作的工作便签软件怎么在团队便签中上传附件文件？_纳图电脑维修...
工作中常用的便签软件敬业签支持创建团队便签,团队便签是一款专为团队协作办公而打造的,可以跨系统.跨设备同步查看团队便签上记录的内容:自2020年10月21日敬业签强更版本后,在团队便签上可以上传附件文 ...
easyui 行编辑修改
function editDept(){ var editRow = undefined;//定义全局变量:当前编辑的行 //修改时要获取选择到的行 var rows = jQuery("# ...
java中上传附件怎么该名称_将附件保存到Outlook中的文件夹并重命名
我正在尝试将Outlook附件保存到文件夹中,并且文件名已经存在,将较新的文件保存在不同的名称下,以便不保存现有文件....也许只是给一个扩展名"v2"甚至"v3&quo ...
修改WordPress中上传附件2M大小限制的方法
https://blog.csdn.net/u010486124/article/details/38348327?utm_source=blogxgwz7 post_max_size=512M up ...
微信公众号如何上传附件(Word、Excel、Pdf、PPT)，三步轻松实现
相信很多朋友都看到过,在公众号文章中的一些带蓝色图标的文字,点击时会弹出一个跳转到"附文件"小程序的提示窗,点击允许后,就可以跳转到"附文件"小程序下载附件. ...
齐博php百度编辑器上传图片_齐博CMS整合百度编辑器上传附件的BUG以及解决办法...
齐博CMS作为目前PHP类CMS中最草根的CMS,能够及时的为站长们着想,将开源的百度编辑器整合进程序,这是值得广大站长欢呼雀跃的事情.但就目前来说,齐博CMS与百度编辑器的整合还是存在一些细小的问题 ...
NodeJS中form上传附件中针对表单的multiple attribute出现的问题总结
在express中上传附件需要在表单中添加enctype="multipart/form-data"属性,并且在新的4.0.1版本中需要手动添加中间件app.use(connect ...
如何在微信公众号上传附件给粉丝下载
4月21日,义务教育课程方案和课程标准(2022年版)发布,一个教育机构的朋友跑过来问我,怎么才能在公众号中上传附件文档给公众号粉丝下载.她从事新媒体运营3年的时间多,算是半个运营老鸟了,平常他们公司 ...
某X建工OA系统上传附件插件丢失的问题解决方案
摘自弗洛姆<爱的艺术> 1.人们认为爱是简单的,困难的是寻找正确的爱的对象,或者被爱.这种态度的部分原因在于现代社会的发展.原因之一是对"爱的对象"选择在二十世纪发生了 ...
关于EasyUI DataGrid行编辑时嵌入时间控件
本人做一个名为"安徽中控"项目时,为快速开发基础数据增删改模块,遂采用EasyUIDatagrid将所有增删改查的操作都集中于表格中,并且所有增删改查操作都集中于泛型对象,从而不必 ...

easyui 行编辑中上传附件

easyui 行编辑中上传附件相关推荐

最新文章

热门文章