<!--选择文件上传-->
<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">&#xe67c;</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-上传文件的更多相关文章

  1. layui 批量上传文件 + 后台 用servlet3.0接收【我】

    前台代码: [主要参照layui官方 文件上传示例 https://www.layui.com/demo/upload.html] <!DOCTYPE html> <html> ...

  2. .Net 上传文件到ftp服务器和下载文件

    突然发现又很久没有写博客了,想起哎呦,还是写一篇博客记录一下吧,虽然自己还是那个渣渣猿. 最近在做上传文件的功能,上传到ftp文件服务器有利于管理上传文件. 前面的博客有写到layui如何上传文件,然 ...

  3. layui上传文件配合进度条

    首先看一下效果图: 修改layui的源文件upload.js 1.打开layui/modules/upload.js 2.搜索ajax 3.找到url: 4.添加以下代码: ,xhr:l.xhr(fu ...

  4. tp5+layui 实现上传大文件

    前言: 之前所写的文件上传类通常进行考虑的是文件的类型.大小是否符合要求条件.当上传大文件时就要考虑到php的配置和服务器的配置问题.之前简单的觉得只要将php.ini中的表单上传的 大小,单脚本执行 ...

  5. layui结合SpringMVC上传文件以及携带额外的参数上传文件

    今天在使用layui的过程中,遇到了使用其上传文件的模块.自己感觉文件上传还是bootstrapfileinput插件比较好用一些,灵活方便,bootstrapfileinput使用方法参考:http ...

  6. Layui上传文件以及数据表格

    layui对于一些前端小白来说,例如我,真的非常的好用,不用去花很多很多的心思在前端美化中,并且提高了很大的工作效率.所以建议一些觉得自己前端技术不是很强,但是想让前端美化一点的可以使用layui. ...

  7. layui上传文件组件(前后端代码实现)

    我个人博客系统上传特色图片功能就是用layui上传文件组件做的.另外采用某个生态框架,尽量都统一用该生态框架对应的解决方案,因为这样一来,有这么几个好处?1.统一而不杂糅,有利于制定相应的编码规范,方 ...

  8. layui上传文件前加入确认提示

    //上传文件 upload: function () { layui.use('upload', function () { var upload = layui.upload; //执行实例 var ...

  9. layui 图片上传+表单提交+ Spring MVC

    Layui 的上传是最常用的, 不可或缺, 记录一下代码, 以后复制都能用!! 1.前端HTML: <div class="layui-form-item"> < ...

  10. [原]Asp.net Core 2.1.2 测试成功Ajax上传文件新解法

    利用layui框架可以上传文件调试拦截成功! [HttpPost] public IActionResult Method1(IFormFile file) { return Json(new{suc ...

随机推荐

  1. [Alpha]Scrum Meeting#9

    github 本次会议项目由PM召开,时间为4月11日晚上10点30分 时长10分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写每日例会报告 撰写每日例会报告撰写并整理任务分配博客 SiMrua ...

  2. 一个好用的ssh终端:MobaXterm

    WSL由于没有图形界面,所有操作都是在命令行里执行,平时用来编译和跑CFD代码其实还是挺方便.不过有时候要查看WSL里的文件就比较麻烦,这时可以用SFTP这类工具,连接过去后直接操作文件.试过几个这类 ...

  3. [转] 使用HTTPS在Nexus Repository Manager 3.0上搭建私有Docker仓库

    FROM: https://www.hifreud.com/2018/06/06/03-nexus-docker-repository-with-ssl/ 搭建方式 搭建SSL的Nexus官方提供两种 ...

  4. SqlServer索引、优化、约束、连接

    索引的创建和删除 create index in_name on person(name) --创建索引 drop index person.in_name --删除索引 create index i ...

  5. (转)我是如何在SQLServer中处理每天四亿三千万记录的

    首先声明,我只是个程序员,不是专业的DBA,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文中有不对的地方,请各位数据库大牛给予指正,以便我能够更好的处理此次业务. ...

  6. Swagger与SpringMVC项目整合

    Swagger与SpringMVC项目整合 来源:http://www.2cto.com/kf/201502/376959.html 为了方便的管理项目中API接口,在网上找了好多关于API接口管理的 ...

  7. PHP之string之str_split()函数使用

    str_split (PHP 5, PHP 7) str_split - Convert a string to an array str_split - 将字符串转换为数组 Description ...

  8. java几个经典的算法题目----------二维矩阵算法

    public class testClockwiseOutput { public static void main(String[] args) { //1.构建矩阵数据 int[][] arr = ...

  9. 【转】Emgu CV on C# (五) —— Emgu CV on 局部自适应阈值二值化

    局部自适应阈值二值化 相对全局阈值二值化,自然就有局部自适应阈值二值化,本文利用Emgu CV实现局部自适应阈值二值化算法,并通过调节block大小,实现图像的边缘检测. 一.理论概述(转载自< ...

  10. pureMVC与strangeIoc框架对比

    前言 最近有机会了解到了StrangeIoc框架,就拿来跟自己比较熟悉的pureMVC进行一下简要的对比.这两套开源框架都是基于MVC模式的扩展,pureMVC是一个跨平台跨语言的MVC轻量级应用框架 ...