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 ...
随机推荐
- Linux服务器核心参数配置
使用Linux作为长连接的web服务器时,为了增加服务的容量,以及处理性能,需要修改一些参数. 一.多进程绑定CPU 1.使用taskset命令可以绑定进程到指定CPU,以减少多核CPU环境中,单进程 ...
- 基于CentOS7系统一键配置Aria2 实现服务器离线下载工具
我们有些网友购买的海外VPS主机并不是用来做网站的,而是用来作为下载资源工具使用的.确实用这样的工具搭建之后是比本地下载速度快,因为有些资源.软件等是海外资源,而且挂载在服务器上不占用本地的资源.在这 ...
- css左右布局,左侧固定,右侧自适应
实现布局的几种方法,见代码: <!DOCTYPE html> <html lang="cn"> <head> <meta charset= ...
- (转)zabbix3.4使用percona-monitoring-plugins监控mysql
原文:https://blog.csdn.net/yanggd1987/article/details/79656771 简介 之前主要使用nagios监控mysql,本文主要介绍使用percona- ...
- Hibernate中Query.list()方法报IllegalArgumentException异常
最近在使用Hibernate开发项目,在写好hql语句,并初始化Query对象,执行Query.list()方法时,应用报IllegalArgumentException异常.经网上查询,现已经基本决 ...
- weblogic.rjvm.PeerGoneException
并发weblogic异常,报错如下: weblogic.rjvm.PeerGoneException: ; nested exception is: weblogic.utils.net.Socket ...
- Windows下安装PHP开发环境
一.Apache 因为Apache官网只提供源代码,如果要使用必须得自己编译,这里我选择第三方安装包Apache Lounge. 进入Apachelounge官方下载地址:http://www.apa ...
- Scrum 冲刺博客第七篇
一.当天站立式会议照片一张 二.每个人的工作 (有work item 的ID),并将其记录在码云项目管理中 昨天已完成的工作 对排行榜的界面和功能进行初步设计 今天计划完成的工作 重新对界面进行美化 ...
- D的小L
D的小L 描述 一天TC的匡匡找ACM的小L玩三国杀,但是这会小L忙着哩,不想和匡匡玩但又怕匡匡生气,这时小L给匡匡出了个题目想难倒匡匡(小L很D吧),有一个数n(0<n<10),写出1 ...
- (三)JNI常用示例
针对我之前文章的练习:JNI方法总结 1. 字符串 JAVA层: test.testString("HELLOWORLD"); JNI层: JNIEXPORT jstring JN ...