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= ...
随机推荐
- android短信数据库监听回调多次问题
在监听android短信数据库变化时.由于只能注册content://sms/ 的observer.所以,在数据库每次状态变化的时候,都会多次回调 onChange 方式.目前还未找到很好的方式,解决 ...
- 【Unity】投影矩阵和线性深度推导
[Unity]投影矩阵和线性深度推导 网络上有很多投影矩阵的推导,也有很多声称是基于 Unity 的,但和我的实测都不一致(现在看来是因为这些文章并不全面),此外有一些 Unity 本身的函数我也搞不 ...
- 【MATLAB习题】铰链四杆机构的运动学分析
铰链四杆机构题目&已知数据 matlab 代码 主程序文件: function main %输入已知数据 clear; i1=101.6; i2=254; i3=177.8; i4=304.8 ...
- 华为平板+Zotero+Xodo+坚果云+Zotfile+Zotero OCR,实现论文笔记平板手写+Win自动生成,补充官方教程
需要的硬件,软件,插件和实现的最终效果,rt. 1. Win,下载Zotero,坚果云 下载网址:https://www.zotero.org/download/ 版本:Zotero 6.如果是其他版 ...
- PostgreSQL configure: error: readline library not found
前言 安装 PostgreSQL 时报错,以下 configure: error: readline library not found If you have readline already in ...
- IvorySQL 4.2 发布
IvorySQL 4.2 已于 2025 年 1 月 13 日正式发布.新版本全面支持 PostgreSQL 17.2,并修复了多项 bug. 增强功能 PostgreSQL 17.1 增强功能 确保 ...
- 编程神器Trae:当我用上后,才知道自己的创造力被低估了多少
"AI会让每个人都能成为工具创造者,打破你能力边界,有时候只需要一个想法." AI粉嫩特攻队,2025年3月23日. 前几天参加了一场行业闭门研讨会,满满1个半小时的干货演讲让我收 ...
- python-argparse用法简介
1. argparse介绍 argparse是Python标准库中用于解析命令行参数的模块.它提供了一种简洁而灵活的方式来处理命令行参数,包括选项(可选参数)和位置参数(必需参数) 2. argpar ...
- BUUCTF---RSA1
RSA基础概念 rsa原理: RSA公开密钥密码体制的原理是:根据数论,寻求两个大素数比较简单,而将它们的乘积进行因式分解却极其困难,因此可以将乘积公开作为加密密钥 RSA算法的具体描述如下: (1) ...
- Wyn商业智能V8.0 Update1版本发布
智启未来,Wyn商业智能V8.0 Update1版本深度融合AI技术.工业物联网与数据工程能力,带来三大核心亮点及100+新特性,致力于为企业打造全场景智能分析平台,助力构建从数据加工到智能决策的全链 ...