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

最新推荐文章于 2023-11-14 11:26:08 发布

讓丄帝愛伱

最新推荐文章于 2023-11-14 11:26:08 发布

阅读量1.9k

点赞数

分类专栏：前端技术文章标签： layui javascript html

本文链接：https://blog.csdn.net/ximaiyao1984/article/details/130329819

版权

前端技术专栏收录该内容

234 篇文章 7 订阅

订阅专栏

手动上传

<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("上传失败！");
            }
        });
    });
}