LayUI upload上传组件上传文件的两种方式（手动上传、自动上传）

1 手动上传

上传文件分为两步，第一步选择文件，第二步上传文件。

HTML代码：

<input type='button' id='selectFile' value='选择文件'>
<div id='fileDiv'></div>
<input type='button' id='uploadFile' value='上传文件'>

JS代码：

$(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,//单位kbbindAction: '#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("上传失败！");}});});
}

2 自动上传

选择文件时自动上传文件。

HTML代码：

<input type='button' id='selectFile' value='选择文件'>
<div id='fileDiv'></div>

JS代码：

$(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,//单位kbchoose: 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("上传失败！");}});});
}

LayUI upload上传组件上传文件的两种方式（手动上传、自动上传）相关推荐

django + python上传文件的两种方式
突然心血来潮,研究了下django+python上传文件的两种方式. 第一:直接采用文件读写的方式上传 1. settings.py文件中设置文件的存放路径和文件读取路径 MEDIA_ROOT = o ...
创建和应用Java包文件的两种方式(转)
创建和应用Java包文件的两种方式(转) <Java编程艺术>章节选登.作者:高永强清华大学出版社 (即将出版) 12.1 包--package ... 12.1.1 包命名规 ...
读写ASCII文件的两种方式
读写ASCII文件的两种方式 :读取文件的路径 EXAMPLE: IDL>asciiFile=FILE_DIRNAME(ROUTINE_FILEPATH('TEST_READF')) + '\d ...
Python加载csv文件的两种方式
本文主要讲解下Python加载csv文件的两种方式,如果知道如何处理的就不必往下看了! 下面来简单介绍下. 实例中的数据集是kaggle的Digit Recognizer的train.csv文件,数据 ...
第四章：数据存储-csv文件处理-读取csv文件的两种方式
直接学习:https://edu.csdn.net/course/play/24756/280718 csv文件处理-读取csv文件的两种方式: # 这种方式读取到的每一条数据是个列表,所以需要通过下 ...
java读取csv文件的两种方式
java读取csv文件的两种方式 1.CsvReader读取 import com.csvreader.CsvReader; /*** CsvReader 读取* @param filePath* @ ...
jsp：jsp包含文件的两种方式
第一种:include指令 include指令:当JSP转换成Servlet时引入指定文件(指令元素),这是一种静态包含,它运行的时候不会单独编译成.class文件,它生成一个新的整体.class文件 ...
KEIL / MDK生成BIN文件的两种方式
KEIL / MDK生成BIN文件的两种方式 1 KEIL工程配置入口点击"魔术棒"图标(Option for Target) 在After Build/Rebuild选项卡中, ...
nodejs 逐行读取文件的两种方式
nodejs 逐行读取文件的两种方式通过readline的方式 const fs = require('fs'); const readline = require('readline');let ...
Spring加载properties文件的两种方式
2019独角兽企业重金招聘Python工程师标准>>> 在项目中如果有些参数经常需要修改,或者后期可能需要修改,那我们最好把这些参数放到properties文件中,源代码中读取pro ...

LayUI upload上传组件上传文件的两种方式（手动上传、自动上传）

1 手动上传

2 自动上传

LayUI upload上传组件上传文件的两种方式（手动上传、自动上传）相关推荐

最新文章

热门文章