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 ...
随机推荐
- QuantLib 金融计算——随机过程之 Heston 过程
目录 QuantLib 金融计算--随机过程之 Heston 过程 Heston 过程 参考文献 如果未做特别说明,文中的程序都是 Python3 代码. QuantLib 金融计算--随机过程之 H ...
- vue进行路由拼图的使用案例
实现思路,利用路由进行实现多个组件拼图: Detail.vue <template> <div> <h1>详细展示</h1> <div>鞍山 ...
- 网络编程-echo服务器
代码: #coding="utf-8" #name=echo服务器 from socket import * #1.创建套接字 udpSocket = socket(AF_INET ...
- 小程序中实时将less编译成wxss
1.npm或者yarn全局安装wxss-cli npm install -g wxss-cli 2.运行wxss-cli命令(weuiTest为小程序目录) wxss ./weuiTest 实时监听w ...
- python 网络编程之socket开发和socketserver模块
一 客户端/服务器架构 1.硬件C/S架构(打印机) 2.软件C/S架构 互联网中处处是C/S架构 如黄色网站是服务端,你的浏览器是客户端(B/S架构也是C/S架构的一种) 腾讯作为服务端为你提供视频 ...
- 造一个轮子然后安装到pypi上
之前写了一个爬虫的包,主要是根据自己写爬虫的情况总结一下. 因为每次都要重复写一些代码,所以提炼出来,类似一个框架的样子吧. 开始是放在自己的项目里引用,但如果换了一个项目,就得重新拷一遍,很麻烦. ...
- 如何为 Go 设计一个通用的日志包
需求 一个通用的日志包,应该满足以下几个需求: 兼容 log.Logger,标准库大量使用了 log.Logger 作为其错误内容的输出通道,比如 net/http.Server.ErrorLog,所 ...
- 《LeetBook》leetcode题解(12):Integer to Roman[M]
我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...
- Hadoop Gateway 部署
1.集群的 hadoop-current hive-current spark-current copy 到 gateway 机器 2.集群的 hadoop-conf hive-conf ...
- Freemarker不显示对象的属性
Freemarker不显示对象的属性 今天使用Freemarker在springboot项目中通过模板生成一些html文件.但是发现没有显示对象的属性. 找了很长时间,终于发现不显示对象的属性可能是两 ...