<!--选择文件上传-->
<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. QuantLib 金融计算——随机过程之 Heston 过程

    目录 QuantLib 金融计算--随机过程之 Heston 过程 Heston 过程 参考文献 如果未做特别说明,文中的程序都是 Python3 代码. QuantLib 金融计算--随机过程之 H ...

  2. vue进行路由拼图的使用案例

    实现思路,利用路由进行实现多个组件拼图: Detail.vue <template> <div> <h1>详细展示</h1> <div>鞍山 ...

  3. 网络编程-echo服务器

    代码: #coding="utf-8" #name=echo服务器 from socket import * #1.创建套接字 udpSocket = socket(AF_INET ...

  4. 小程序中实时将less编译成wxss

    1.npm或者yarn全局安装wxss-cli npm install -g wxss-cli 2.运行wxss-cli命令(weuiTest为小程序目录) wxss ./weuiTest 实时监听w ...

  5. python 网络编程之socket开发和socketserver模块

    一 客户端/服务器架构 1.硬件C/S架构(打印机) 2.软件C/S架构 互联网中处处是C/S架构 如黄色网站是服务端,你的浏览器是客户端(B/S架构也是C/S架构的一种) 腾讯作为服务端为你提供视频 ...

  6. 造一个轮子然后安装到pypi上

    之前写了一个爬虫的包,主要是根据自己写爬虫的情况总结一下. 因为每次都要重复写一些代码,所以提炼出来,类似一个框架的样子吧. 开始是放在自己的项目里引用,但如果换了一个项目,就得重新拷一遍,很麻烦. ...

  7. 如何为 Go 设计一个通用的日志包

    需求 一个通用的日志包,应该满足以下几个需求: 兼容 log.Logger,标准库大量使用了 log.Logger 作为其错误内容的输出通道,比如 net/http.Server.ErrorLog,所 ...

  8. 《LeetBook》leetcode题解(12):Integer to Roman[M]

    我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...

  9. Hadoop Gateway 部署

    1.集群的 hadoop-current hive-current spark-current copy 到 gateway 机器 2.集群的 hadoop-conf       hive-conf ...

  10. Freemarker不显示对象的属性

    Freemarker不显示对象的属性 今天使用Freemarker在springboot项目中通过模板生成一些html文件.但是发现没有显示对象的属性. 找了很长时间,终于发现不显示对象的属性可能是两 ...