layUI批量上传文件
<div class="layui-form-item">
<label class="layui-form-label febs-form-item-require">商品轮播图:</label>
<div class="layui-input-block">
<div class="layui-upload">
<div class="layui-btn" id="commBigPathBtn">轮播图上传</div>
<input type="text" name="commBigPath" id="commBigPath" maxlength="2000" autocomplete="off" class="layui-input">
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
<div class="layui-upload-list" id="commBigPathView"></div>
</blockquote>
</div>
</div>
</div> <div class="layui-form-item">
<label class="layui-form-label febs-form-item-require">商品详情:</label>
<div class="layui-input-block">
<div class="layui-upload">
<div class="layui-btn" id="commDetailsPathBtn">详情图上传</div>
<input type="text" name="commDetailsPath" id="commDetailsPath" maxlength="2000" autocomplete="off" class="layui-input">
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
<div class="layui-upload-list" id="commDetailsPathView"></div>
</blockquote>
</div>
</div>
</div>
//轮播图片上传(多图上传)
upload.render({
elem: '#commBigPathBtn'
,url: 'comm/comm/import' //此处配置你自己的上传接口即可
,multiple: true
,acceptMime: 'image/*'
,before: function(obj){
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#commBigPathView').append('<img style="width: 100px;height: 100px;margin-right: 5px" id="'+index+'" src="'+ result +'" title="'+ file.name +'" class="layui-upload-img"><i class="layui-icon layui-icon-delete" index="'+index+'"></i>')
}); // 删除图片
$("#commBigPathView").on("click", "i", function(res){
delete files[$(this).attr("index")]; //删除对应的文件
$(this).remove();
$("#"+$(this).attr("index")).remove();
});
}
,done: function(res, index){
//如果上传成功
if(res.code == 200){
debugger
layer.msg('上传成功',{icon: 1});
var imgpath = $('#commBigPath').val().split(",");
for(var i = 0 ; i < imgpath.length ; i++){
if(imgpath[i]==(res.message)){
imgpath[i] = res.data;
}
}
$('#commBigPath').val(imgpath.toString()); }else{
layer.msg('上传失败',{icon: 2});
}
}
}); //详情图片上传(多图上传)
upload.render({
elem: '#commDetailsPathBtn'
,url: 'comm/comm/import' //此处配置你自己的上传接口即可
,multiple: true
,acceptMime: 'image/*'
,before: function(obj){
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#commDetailsPathView').append('<img style="width: 100px;height: 100px;margin-right: 5px" id="'+index+'" src="'+ result +'" title="'+ file.name +'" class="layui-upload-img"><i class="layui-icon layui-icon-delete" index="'+index+'"></i>') }); // 删除图片
$("#commDetailsPathView").on("click", "i", function(res){
delete files[$(this).attr("index")]; //删除对应的文件
$(this).remove();
$("#"+$(this).attr("index")).remove();
});
}
,done: function(res, index){
//如果上传成功
if(res.code == 200){
//上传成功
if($('#commDetailsPath').val()!="" && $('#commDetailsPath').val()!=null){
$('#commDetailsPath').val($('#commDetailsPath').val()+','+file.name);
}else{
$('#commDetailsPath').val(file.name);
}
}else{ layer.msg('上传失败',{icon: 2}); } } });
layUI批量上传文件的更多相关文章
- layui 批量上传文件 + 后台 用servlet3.0接收【我】
前台代码: [主要参照layui官方 文件上传示例 https://www.layui.com/demo/upload.html] <!DOCTYPE html> <html> ...
- Linux命令之rz - 批量上传文件,简单易用(转载)
用途说明 rz命令能够批量上传文件,当然也可上传单个文件啦.使用的协议是古老的ZMODEM协议,尽管协议古老,但毫不影响的简单易用的特性.一般情 况我们要上传文件到Linux系统,要么使用ftp(还得 ...
- 转 Android网络编程之使用HttpClient批量上传文件 MultipartEntityBuilder
请尊重他人的劳动成果,转载请注明出处:Android网络编程之使用HttpClient批量上传文件 http://www.tuicool.com/articles/Y7reYb 我曾在<Andr ...
- 不带插件 ,自己写js,实现批量上传文件及进度显示
今天接受项目中要完成文件批量上传文件而且还要显示上传进度,一开始觉得这个应该不是很麻烦,当我在做的时候遇到了很多问题,很头疼啊. 不过看了别人写的代码,自己也测试过,发现网上好多都存在一些问题,并不是 ...
- Python基于Python实现批量上传文件或目录到不同的Linux服务器
基于Python实现批量上传文件或目录到不同的Linux服务器 by:授客 QQ:1033553122 实现功能 1 测试环境 1 使用方法 1 1. 编辑配置文件conf/rootpath_fo ...
- input file multiple 批量上传文件
这几天维护系统,有一个批量上传文件功能,出现了一点小问题 我的笔记本选择要上传的文件很正常 但在测试环境上,别人的电脑上,选择上传文件之后 一开始,以为是代码问题,网上找了很多的资料,但还是没用,然后 ...
- 使用 sendKeys(keysToSend) 批量上传文件
未经允许,禁止转载!!! 在selenium里面处理文件上传的时候可以使用sendKeys(keysToSend) 上传文件 例如: element.sendKeys(“C:\\test\\uploa ...
- TP3.2批量上传文件(图片),解决同名冲突问题
1.html <form action="{:U('Upload/index')}" enctype="multipart/form-data" meth ...
- 用Azure CLI批量上传文件
在Windows环境下,我们可以使用AzCopy批量上传文件.其效率和传输速率都是非常快的. 在Linux或MacOS环境下,可以使用Azure的CLI实现批量文件的上传. 下面的脚本可以实现此功能. ...
- Java Miniui实现批量上传文件demo 201906221520
可能需要的jar包: 需要miniui(类似easyui). Test2019062201.jsp <%@ page language="java" contentType= ...
随机推荐
- [BZOJ3569] DZY Loves Chinese II 题解
考虑不联通的情况.图不好做,就造一棵生成树出来,由于是无向图,所以只有树边和返祖边. 发现在一条树边断开后,生成树会分成两个连通块,由覆盖这条树边的返祖边链接,只有这些返祖边也全部断开,原图才会不联通 ...
- openlayers 在地图上绘制矩形框,非鼠标框选
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title d ...
- Typecho复制文章自带版权说明
自带版权说明代码 <script> document.body.addEventListener('copy', function (e) { if (window.getSelectio ...
- 记一次QT的QSS多个控件设置同一个样式的问题
文章目录 Qt样式表的格式问题 问题的引入 qss 选择器 问题所在 Reference Qt样式表的格式问题 问题的引入 最近在进行样式设计的时候,发现了一个问题,具体如下: 我是将所有样式写到.q ...
- 关于computed
前言: 前言就是有了前几篇的基础对于vue相应式原理的初步了解之后,再去看这两个东西会方便很多.写这篇文章是为了一个梳理,还有一些其他的原因,年底再说. 先看computed computed是在in ...
- 使用C#创建一个MCP客户端
前言 网上使用Python创建一个MCP客户端的教程已经有很多了,而使用C#创建一个MCP客户端的教程还很少. 为什么要创建一个MCP客户端呢? 创建了一个MCP客户端之后,你就可以使用别人写好的一些 ...
- Windows 10 的 "邮件" 设置完成QQ账户,提示您的Qq帐户设置已过期的处置方法
引起这问题的原因可能是QQ未开启 1.POP3/SMTP服务 2.IMAP/SMTP服务 开启方法: 1.登录QQ邮箱(mail.qq.com) 2.点击"设置"->&q ...
- ELF-Virus简易病毒程序分析
系统功能概述 ELF-Virus实现了一个简单的病毒程序,能够感染当前目录下的ELF格式的可执行文件.病毒程序通过将自身代码附加到目标文件中,并在文件末尾添加一个特定的签名来标记文件已被感染.感染后的 ...
- 我对TamperMonkey的不满-更新中
我认为我的电脑上的TamperMonkey插件的值得考虑的不足: 没有提供一个把脚本最小化的功能 不能编辑热键 脚本icon不能使用svg 没有提供一种很好的能够区分别人的脚本和自己的脚本的方式,自己 ...
- 【电脑】重装Win10之后无法唤醒和正常关机(Y9000P 2022)
问题: Y9000P 2022 改Windows10后经常关机关不全(自带键盘灯亮,电源指示灯不灭),这还不是最重要的,它一会儿不用到时间自动休眠后还经常唤醒不了 解决: 两个问题,总结一下: 一.关 ...