【_ 記】topjui 多文件上传（代码）

topjui 多文件上传

页面展示：

topjui代码：

<div class="topjui-row"><div class="topjui-col-sm12"><label class="topjui-form-label">文件上传</label><div class="topjui-input-block"><div class="layui-upload"><a href="javascript:void(0)"data-toggle="topjui-menubutton"data-options="iconCls:'fa fa-search',btnCls:'topjui-btn-blue'" id="SelectList">选择多文件</a><%--               <a href="javascript:void(0)"--%>
<%--                  data-toggle="topjui-menubutton"--%>
<%--                  data-options="iconCls:'fa fa-folder',btnCls:'topjui-btn-purple'" id="ListAction">开始上传</a>--%><div class="layui-upload-list"><table class="layui-table" lay-size="sm" style="table-layout: fixed"><thead><tr><th>文件名</th><th>大小</th><th>状态</th><th>操作</th></tr></thead><tbody id="FileList"></tbody></table></div></div></div></div></div>

javascript

<script type="text/javascript">layui.use('upload', function () {var $ = layui.jquery,upload = layui.upload;//多文件列表var FileListView = $('#FileList'),uploadListIns = upload.render({elem: '#SelectList',url: 'xxxx',accept: 'file',multiple: true,auto: false,choose: function (obj) {var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列//读取本地文件obj.preview(function (index, file, result) {var tr = $(['<tr id="upload-' + index + '">', '<td width="35%" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap">' + file.name + '</td>', '<td class="filePathArray" width="50px" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap">' + (file.size / 1014).toFixed(1) + 'kb</td>', '<td width="5%" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap">等待上传</td>', '<td width="10%" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap">', '<button class="layui-btn layui-btn-xs demo-reload" id="uploadOne-' + index + '">上传</button>', '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>', '</td>', '</tr>'].join(''));//单个重传tr.find('.demo-reload').on('click', function () {obj.upload(index,file);return false;});//删除tr.find('.demo-delete').on('click', function () {delete files[index]; //删除对应的文件tr.remove();uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选});FileListView.append(tr);});}, done: function (res, index, upload) {if (res.statusCode == 200) { //上传成功var tr = FileListView.find('tr#upload-' + index),tds = tr.children();tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');tds.eq(1).html(res.filePath); //清空操作tds.eq(1).attr("title",res.filePath);tds.eq(3).html('');return delete this.files[index]; //删除文件队列已经上传成功的文件}this.error(index, upload);},allDone: function(obj){ //当文件全部被提交后，才触发},error: function (index, upload) {var tr = FileListView.find('tr#upload-' + index),tds = tr.children();tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传}});});
</script>

控制层代码

public Result update(){String path=queryOneSystemConfigInfo.getConfigValue()+File.separator+new SimpleDateFormat("yyyyMM").format(new Date())+File.separator+ UUID.randomUUID().toString()+File.separator;String attachmentCode = this.request.getParameter("attachmentCode");if(attachmentCode.isEmpty()){Result mResult = new Result();mResult.setStatusCode(300);mResult.setTitle("操作失败！");mResult.setMessage("请正确选择上传的附件！");return mResult;}File dirname = new File(path);if (!dirname.isDirectory()) {dirname.mkdirs();}String newFileName = "";try {CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());if (multipartResolver.isMultipart(request)) {MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;Iterator<String> iter = multiRequest.getFileNames();while (iter.hasNext()) {MultipartFile file = multiRequest.getFile(iter.next());if (file != null) {String fileName = file.getOriginalFilename();if (!file.isEmpty()) {attachmentCode = fileName.substring(0,fileName.lastIndexOf("."));newFileName =attachmentCode+fileName.substring(fileName.lastIndexOf("."));newFileName = newFileName.replace(" ","");try {FileOutputStream fos = new FileOutputStream(path + File.separator + newFileName);InputStream in = file.getInputStream();int b = 0;while ((b = in.read()) != -1) {fos.write(b);}fos.close();in.close();} catch (Exception e) {Result mResult = new Result();mResult.setStatusCode(300);mResult.setTitle("操作失败");mResult.setMessage("对不起，文件上传失败！");return mResult;}}}}}Result mResult = new Result();mResult.setStatusCode(200);mResult.setTitle("操作提示");mResult.setMessage("文件上传成功");mResult.setFilePath(path+newFileName);return mResult;} catch (Exception e) {Result mResult = new Result();mResult.setStatusCode(300);mResult.setTitle("操作失败");mResult.setMessage("对不起，文件上传失败！");return mResult;}
}

【_ 記】topjui 多文件上传（代码）相关推荐

php批量上传代码,文件批量上传_php文件上传代码（支持文件批量上传）
摘要腾兴网为您分享:php文件上传代码(支持文件批量上传),雨课堂版,洋游码头,学堂里,小度等软件知识,以及电脑硬件温度检测软件,日事清app,lol韩服语音包,绝地求生无后座力设置,金山u盘卫士, ...
php验证码大全(实例分享),php文件上传代码大全(实例分...-php验证码大全(实例分享)-php打印倒三角的实例代码_169IT.COM...
本节主要内容: php中的文件上传代码在我们平时的php编程中,涉及文件上传的内容很多,无论是简单的留言本程序,还是复杂的新闻系统,甚至是功能完备的cms系统中,都少不了文件上传的功能与代码. 本文 ...
php 上传文件模板,PHP文件上传代码用法详解
本文章是一篇适合于php入门者的文章告诉大如何编辑php文件上传代码,在编辑前我们需要了解几点,有及FILES全局变量的理解了,有需要学习php文件上传的朋友可参考本文章. php文件上传代码编写过程 ...
ThinkPHP6 API 单文件+多文件上传代码实现方式
ThinkPHP6 API 单文件+多文件上传代码实现方式开发中经常要用到接口上传单文件或多文件,做个备忘录,有需要的同学直接copy. 提交方式:form-data , 参数名 file[] T ...
php用什么上传代码,php常用文件怎么上传_PHP常用文件上传代码_一聚教程网
在PHP的使用中,它有着非常方便的操作设计,这次文章就给大家介绍下怎么使用PHP实现常用文件上传,相信这也是大多数人会遇到的问题,下面我们具体看看上传方法. _path = $path; $this- ...
php处理html5文件上传代码,HTML5中文件上传的代码
这篇文章给大家分享的内容是关于HTML5中文件上传的代码,有一定的参考价值,有需要的朋友可以从参考一下,希望对你有所帮助.XHR2上传二进制文件 html代码: javascript代码:functi ...
fckeditor漏洞_三十，文件上传漏洞、编辑器漏洞和IIS高版本漏洞及防御
一.编辑器漏洞 1.编辑器编辑器属于第三方软件,它的作用是方便网站管理员上传或编辑网站上的内容,类似我们电脑上的Word文档. 编辑器通常分为两种情况: (1) 不需要后台验证,可以直接在前台访问且 ...
ie6多文件上传_一个好的“文件上传”功能必须要注意的这些点你都知道吗？
检查上传文件扩展名白名单,不属于白名单内,不允许上传:[前端和后端都要做好校验] 上传文件的目录必须是http请求无法直接访问到的.如果需要访问的,必须上传到其他(和web服务器不同的)域名下,并设置 ...
上传文件_.net core进行文件上传
.net core 和.net framework上传文件还是有一些区别的有很多注意的地方 .net framework 上传文件用httppostedfilebase .net core 上传文件用 ...
[asp常用代码]文件上传代码
调用实例: UploadDemo.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">& ...

【_ 記】topjui 多文件上传（代码）

【_ 記】topjui 多文件上传（代码）相关推荐

最新文章

热门文章

【_ 記 】topjui 多文件上传 （代码）

【_ 記 】topjui 多文件上传 （代码）相关推荐

最新文章

热门文章

【_ 記】topjui 多文件上传（代码）

【_ 記】topjui 多文件上传（代码）相关推荐