layui-open-上传文件
<!--选择文件上传-->
<script id="upload_file_dialog" type="text/html">
<div class="layui-form-item">
<label class="layui-form-label">文件上传</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" onclick="$('input[name=uploadfile]').click();">
<i class="layui-icon"></i>上传文件
</button>
<input type="file" name="uploadfile" style="display: none;" />
</div>
<label class="layui-form-label" style="width: 100%; text-align: left; padding-left: 110px;color:red;"
id="uploadFileName">
文件上传</label>
</div>
</script>
//文件上传change事件
$("input[name=uploadfile][type=file]").on("change", function (e) {
var filePath = $(this).val();
filePath = filePath.substring(filePath.lastIndexOf("\\")+1);
$("#uploadFileName").text(filePath);
});
function selectFileClick() {
//判断浏览器版本
if (webim.BROWSER_INFO.type == 'ie' && parseInt(webim.BROWSER_INFO.ver) <= 9) {
layui.layer.msg('上传文件暂不支持ie9(含)以下浏览器');
//$('#updli_file_form')[0].reset();
//$('#upload_file_low_ie_dialog').modal('show');
} else {
layui.layer.open({
title: "文件上传",
content: $('#upload_file_dialog').html(),
area: ['500px', '300px'],
btn: ['发送', '取消'],
yes: function (index, layero) {//发送
uploadFileBoxIndex = index;
uploadFile();
},
btn2:function(index, layero) {//取消
}
});
//文件上传change事件
$("input[name=uploadfile][type=file]").on("change", function (e) {
var filePath = $(this).val();
filePath = filePath.substring(filePath.lastIndexOf("\\")+1);
$("#uploadFileName").text(filePath);
});
}
}

layui-open-上传文件的更多相关文章
- layui 批量上传文件 + 后台 用servlet3.0接收【我】
前台代码: [主要参照layui官方 文件上传示例 https://www.layui.com/demo/upload.html] <!DOCTYPE html> <html> ...
- .Net 上传文件到ftp服务器和下载文件
突然发现又很久没有写博客了,想起哎呦,还是写一篇博客记录一下吧,虽然自己还是那个渣渣猿. 最近在做上传文件的功能,上传到ftp文件服务器有利于管理上传文件. 前面的博客有写到layui如何上传文件,然 ...
- layui上传文件配合进度条
首先看一下效果图: 修改layui的源文件upload.js 1.打开layui/modules/upload.js 2.搜索ajax 3.找到url: 4.添加以下代码: ,xhr:l.xhr(fu ...
- tp5+layui 实现上传大文件
前言: 之前所写的文件上传类通常进行考虑的是文件的类型.大小是否符合要求条件.当上传大文件时就要考虑到php的配置和服务器的配置问题.之前简单的觉得只要将php.ini中的表单上传的 大小,单脚本执行 ...
- layui结合SpringMVC上传文件以及携带额外的参数上传文件
今天在使用layui的过程中,遇到了使用其上传文件的模块.自己感觉文件上传还是bootstrapfileinput插件比较好用一些,灵活方便,bootstrapfileinput使用方法参考:http ...
- Layui上传文件以及数据表格
layui对于一些前端小白来说,例如我,真的非常的好用,不用去花很多很多的心思在前端美化中,并且提高了很大的工作效率.所以建议一些觉得自己前端技术不是很强,但是想让前端美化一点的可以使用layui. ...
- layui上传文件组件(前后端代码实现)
我个人博客系统上传特色图片功能就是用layui上传文件组件做的.另外采用某个生态框架,尽量都统一用该生态框架对应的解决方案,因为这样一来,有这么几个好处?1.统一而不杂糅,有利于制定相应的编码规范,方 ...
- layui上传文件前加入确认提示
//上传文件 upload: function () { layui.use('upload', function () { var upload = layui.upload; //执行实例 var ...
- layui 图片上传+表单提交+ Spring MVC
Layui 的上传是最常用的, 不可或缺, 记录一下代码, 以后复制都能用!! 1.前端HTML: <div class="layui-form-item"> < ...
- [原]Asp.net Core 2.1.2 测试成功Ajax上传文件新解法
利用layui框架可以上传文件调试拦截成功! [HttpPost] public IActionResult Method1(IFormFile file) { return Json(new{suc ...
随机推荐
- ZJOI2019 day2 游记
应该是打的最没有信仰的一次比赛了 然后这个垃圾水平居然还拿了170,真是有毒 我的语文并不好所以还是写流水账吧 day-2 到了余姚,发现附近并没有什么好吃的,于是直接去kfc了 另外潮湿的空气对呼吸 ...
- Exponentiation POJ-1001
http://poj.org/problem?id=1001 //10000000 100000 #include<iostream> #include<cstring> us ...
- Java代码度量分析工具:Designite简介
前言 在Java面向对象课程的学习过程中,我们需要使用度量工具来分析自己程序的代码结构.此类的度量工具有许多,或以插件形式存在于各个IDE中,或以.jar包的形式供用户使用.在这里,笔者向大家简单的介 ...
- Windows网络服务渗透攻击分类
网络服务渗透攻击分为三类 一.针对于windows系统自带的网络服务的渗透攻击 1.针对于NetBIOS的攻击 NetBIOS以运行在TCP/IP系统中的NBT协议来实现,具体包括在UDP的137端口 ...
- MONO MessageBox 类
MessageBox类,负责提示各种消息. using System; using Android.App; using Android.Content; namespace Box { publ ...
- (转)分布式中使用Redis实现Session共享(一)
上一篇介绍了如何使用nginx+iis部署一个简单的分布式系统,文章结尾留下了几个问题,其中一个是"如何解决多站点下Session共享".这篇文章将会介绍如何使用Redis,下一篇 ...
- vue测试安装和配置
npm install --save-dev @vue/test-utils mocha mocha-webpack npm install --save-dev jsdom jsdom-global ...
- [心平气和读经典]The TCP/IP Guide(001)
The TCP/IP Guide[Page 40,41] Introduction To the TCP/IP Guide | TCP/IP指南概述 As I sit here writing thi ...
- shell命令跟踪
Linux Shell提供了两种方式来跟踪Shell脚本中的命令,以帮助我们准确的定位程序中存在的问题.下面的代码为第一种方式,该方式会将Shell脚本中所有被执行的命令打印到终端,并在命令前加&qu ...
- 文件流FileStram类
本节课主要学习三个内容: 创建FileStram流 读取流 写入流 文件流FileStram类,是用来实现对文件的读取和写入.FileStram是操作字节的字节数组,当提供向文件读取和写入字节的方法时 ...