LayUI upload上传组件上传文件的两种方式

简介: LayUI upload上传组件上传文件的两种方式

手动上传

<input type='button' id='selectFile' value='选择文件'>
<div id='fileDiv'></div>
<input type='button' id='uploadFile' value='上传文件'>
$(function(){
    initUpload();
});
//初始化上传组件
function initUpload(){
    layui.use(['upload'], function () {
        var upload = layui.upload;
        //单文件上传
        upload.render({
            elem: '#selectFile',
            url: "upload.aspx",
            accept: 'file',
            multiple: false,
            auto: false,
            size: 50 * 1024,//单位kb
            bindAction: '#uploadFile',
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    $("#fileDiv").val(file.name);
                });
            },
            done: function (res, index, upload) {
                if (res.Code == 1) { //上传成功
                    alert("上传成功");
                }
                else {
                    alert("上传失败!");
                }
            },
            error: function (index, upload) {
                alert("上传失败!");
            }
        });
    });
}

自动上传

选择文件时自动上传文件

<input type='button' id='selectFile' value='选择文件'>
<div id='fileDiv'></div>
$(function(){
    initUpload();
});
//初始化上传组件
function initUpload(){
    layui.use(['upload'], function () {
        var upload = layui.upload;
        //单文件上传
        upload.render({
            elem: '#selectFile',
            url: "upload.aspx",
            accept: 'file',
            multiple: false,
            auto: true,//是否自动上传,true自动上传,false手动上传
            size: 50 * 1024,//单位kb
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    $("#fileDiv").val(file.name);
                });
            },
            done: function (res, index, upload) {
                if (res.Code == 1) { //上传成功
                    alert("上传成功");
                }
                else {
                    alert("上传失败!");
                }
            },
            error: function (index, upload) {
                alert("上传失败!");
            }
        });
    });
}


相关文章
|
JSON 前端开发 Java
layui上传图片,前端直接拷代码,后端……
layui上传图片,前端直接拷代码,后端……
layUI数据表格可编辑表格单元格值修改之后获取修改前的值
layUI数据表格可编辑表格单元格值修改之后获取修改前的值
964 0
|
JavaScript
Layui数据表格嵌套文件上传按钮
Layui数据表格嵌套文件上传按钮
626 0
|
前端开发
layui select 绑定onchange事件失效
layui select 绑定onchange事件失效问题处理
|
前端开发 JavaScript 数据库
layui联动菜单搜索select表单选项的设置方法
layui联动菜单搜索select表单选项的设置方法
1414 0
|
开发框架 前端开发 API
LayUI的使用
LayUI的使用
633 0
|
XML 应用服务中间件 数据格式
windows下Tomcat8.0解压版安装并配置环境变量
windows下Tomcat8.0解压版安装并配置环境变量
1876 0
Layui 内置方法 - layer.msg(提示框)
Layui 内置方法 - layer.msg(提示框)
1585 0
|
前端开发 JavaScript 安全
前端框架Layui实现动态选项卡&iframe使用(附源码)
前端框架Layui实现动态选项卡&iframe使用(附源码)
2768 0
|
JSON 前端开发 安全
layui框架实战案例(22):多附件上传实战开发实录(php后端、文件删除、数据库删除)
layui框架实战案例(22):多附件上传实战开发实录(php后端、文件删除、数据库删除)
1487 0