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= ...
随机推荐
- c# 删除文件夹最快的函数方法 无视占用 直接删除
原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/17270147.html 代码如下,直接通过cmd调用dos命令进行删除 public stat ...
- elementUI中如何在Tabs标签页的标题文字后面添加文字或图标
1.效果如下: 实现代码如下:<el-tab-pane name="first"> <span slot="label"> <sp ...
- java stream sorted排序 考虑null值
项目里使用到排序, java里没有像C# 里的linq,只有stream,查找stream.sorted源码看到有个 Comparator.nullsLast 然后看了一下实现,果然是能够处理null ...
- Redis 大 Key 分析利器:支持 TOP N、批量分析与从节点优先
背景 Redis 大 key 分析工具主要分为两类: 1. 离线分析 基于 RDB 文件进行解析,常用工具是 redis-rdb-tools(https://github.com/sripathikr ...
- P5355 [Ynoi Easy Round 2017] 由乃的玉米田
莫队 + bitset + 根号分支 乘法似乎是简单的,我们可以直接莫队扫描然后枚举较小数 时间 \((n + m) \sqrt n\). 加法是一个经典 idea, 莫队套 bitset,然后利用 ...
- wikidata介绍和查询
Wikidata是一个大型结构化开源知识图,为维基百科等项目提供支持.我们可使用SPARQL(Wikidata官方Tutorial)对其进行查询.SPARQL是一种专为 RDF(Resource ...
- 经由同个文件多次压缩的文件MD5都不一样问题排查,感慨AI的强大!
开心一刻 今天点了个外卖:牛肉炒饭 外卖到了后,发现并没有牛肉,我找商家理论 我:老板,这个牛肉炒饭的配菜是哪些? 商家:青菜 豆芽 火腿 鸡蛋 葱花 我:没有牛肉? 商家:亲,没有的哦 我:我点的牛 ...
- pycharm clone GitHub 提示 OpenSSL SSL_read: Connection was reset, errno 10054
配置界面 错误提示 原因分析 clone的时候需要安全认证,当你在配置页面勾选上ssh ,就会报错 解决方案 在cmd里输入命令,然后再clone git config --global http.s ...
- Ollama+DeepSeek+SlackBot
技术背景 想必最近有在部署DeepSeek大模型的人,看标题就知道这篇文章在做什么事情了.由于Ollama对于IP的监听缺乏安全防护,并且内网部署的Ollama模型对于外网来说也是不可见的,而如果使用 ...
- 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
我在业余时间开发了一款自己的独立产品:升讯威在线客服与营销系统.陆陆续续开发了几年,从一开始的偶有用户尝试,到如今线上环境和私有化部署均有了越来越多的稳定用户. 随时近来 AI 大模型的火热,越来越多 ...