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上传图片,前端直接拷代码,后端……
|
JavaScript
Layui数据表格嵌套文件上传按钮
Layui数据表格嵌套文件上传按钮
451 0
layUI数据表格可编辑表格单元格值修改之后获取修改前的值
layUI数据表格可编辑表格单元格值修改之后获取修改前的值
719 0
|
前端开发 JavaScript 数据库
layui联动菜单搜索select表单选项的设置方法
layui联动菜单搜索select表单选项的设置方法
1150 0
|
前端开发 JavaScript 安全
前端框架Layui实现动态选项卡&iframe使用(附源码)
前端框架Layui实现动态选项卡&iframe使用(附源码)
2389 0
|
JSON 前端开发 安全
layui框架实战案例(22):多附件上传实战开发实录(php后端、文件删除、数据库删除)
layui框架实战案例(22):多附件上传实战开发实录(php后端、文件删除、数据库删除)
1236 0
|
JavaScript 算法 前端开发
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
3381 0
|
JavaScript 前端开发
layui下拉框xm-select自定义搜索使用方法
【10月更文挑战第28天】`xm - select` 是基于 Layui 的下拉框增强插件,支持自定义搜索功能。实现步骤包括:1. 引入 Layui 和 xm - select 的核心文件;2. 创建下拉框的基本 HTML 结构;3. 使用 `layui.use` 函数初始化插件并配置搜索功能;4. 可选地进行高级自定义搜索优化,如模糊匹配、多字段搜索和实时更新数据。通过这些步骤,可实现灵活的下拉框搜索功能。
3632 1
|
安全 前端开发 PHP
layui框架实战案例(21):layui上传的哪些事(layui.upload组件、 file文件域、php后台上传)
layui框架实战案例(21):layui上传的哪些事(layui.upload组件、 file文件域、php后台上传)
2350 0
layui根据数据状态判断显示内容
layui根据数据状态判断显示内容
518 0