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= ...
随机推荐
- 标题Spark Mavem项目在本地测试报错 : Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/spark/SparkConf
Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/spark/SparkConf at S ...
- ubuntu更换国内镜像源备忘
源的路径: /etc/apt/sources.list 更换前备份一下: sudo cp /etc/apt/sources.list /etc/apt/sources_init.list 打开文档,修 ...
- el-cascader 最后一级不显示出来
1.业务背景 业务需要做一个父级查询,父级查询的级联组件不显示最后一级,其他层级均显示 2.解决办法 1.页面设计见上文 TypeError: Cannot read properties of nu ...
- php实现地址跳转的方式
在PHP中,实现地址跳转主要有以下几种方式: 1. 使用 header() 函数 header() 函数用于发送原始的 HTTP 头信息,常用于实现页面跳转. <?php header(&quo ...
- Java 浮点型去除后面多余的零
当我们输出的小数不知道有几位小数,也不知道后面有没有带零,去掉后面多余零可以采用以下方法.在实际使用中,多用于小数转百分数,百分数前面的小数乘以100后转String输出,输出的String很多带零, ...
- DBeaver连接mysql时,报错Public Key Retrieval is not allowed
解决 在新建连接的时候,驱动属性里设置 allowPublicKeyRetrieval 的值为 true.
- go gin web服务器使用fvbock/endless优雅地重启或停止
gin使用fvbock/endless gin 正常使用注册路由时: package main import "github.com/gin-gonic/gin" func mai ...
- 实验二:D3数据可视化基础
实验目的: 熟悉 D3 数据可视化的使用方法. 实验原理: D3 的全称是(Data-Driven Documents),是一个被数据驱动的文档,其实就是 一个 JavaScript 的函数库,使用它 ...
- Docker restart 重启容器
就像很多常驻后台应用程序动不动可能就需要重启操作一样,有时候我们可能也需要重启容器 而重启容器使用的就是 docker restart 命令 docker restart <container_ ...
- Gentoo 使用 Obs进行屏幕分享
Obs-Studio 安装使用 on Hyprland 依赖安装 pipewire wireplumber xdg-desktop-portal-hyprland emerge -aq pipewir ...