layui上传HTML,layui上传插件之txt上传(格式过滤)

前言

好久都没有用 layui 了，很多东西又要开始学了，今天在使用 layui 上传文件的时候需要上传 txt 文件，但是官方的文档中并没有选择文件是只保留 txt 格式。

layui txt 文件上传代码

//多文件列表示例

var demoListView = $('#demoList'),

uploadListIns = upload.render({

elem: '#testList',

url: '/upload/upload.php',

accept: 'file',

multiple: true,

auto: false,

acceptMime: 'text/plain', // 此处是重点

exts: 'txt',

bindAction: '#testListAction',

choose: function(obj) {

var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列

console.log(files)

//读取本地文件

obj.preview(function(index, file, result) {

var tr = $(['

', '' + file.name + '', '' + (file.size / 1024).toFixed(

1) + 'kb

', '等待上传', '',

'重传',

'删除', '

', ''

].join(''));

//单个重传

tr.find('.demo-reload').on('click', function() {

obj.upload(index, file);

});

//删除

tr.find('.demo-delete').on('click', function() {

delete files[index]; //删除对应的文件

tr.remove();

uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选

});

demoListView.append(tr);

});

},

done: function(res, index, upload) {

if (res.files.file) { //上传成功

var tr = demoListView.find('tr#upload-' + index),

tds = tr.children();

tds.eq(2).html('上传成功');

tds.eq(3).html(''); //清空操作

return delete this.files[index]; //删除文件队列已经上传成功的文件

}

this.error(index, upload);

},

error: function(index, upload) {

var tr = demoListView.find('tr#upload-' + index),

tds = tr.children();

tds.eq(2).html('上传失败');

tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传

}

});

acceptMime 拓展值

*.3gpp

audio/3gpp, video/3gpp

3GPP Audio/Video

*.ac3

audio/ac3

AC3 Audio

*.asf

allpication/vnd.ms-asf

Advanced Streaming Format

*.au

audio/basic

AU Audio

*.css

text/css

Cascading Style Sheets

*.csv

text/csv

Comma Separated Values

*.doc

application/msword

MS Word Document

*.dot

application/msword

MS Word Template

*.dtd

application/xml-dtd

Document Type Definition

*.dwg

image/vnd.dwg

AutoCAD Drawing Database

*.dxf

image/vnd.dxf

AutoCAD Drawing Interchange Format

*.gif

image/gif

Graphic Interchange Format

*.htm

text/html

HyperText Markup Language

*.html

text/html

HyperText Markup Language

*.jp2

image/jp2

JPEG-2000

*.jpe

image/jpeg

JPEG

*.jpeg

image/jpeg

JPEG

*.jpg

image/jpeg

JPEG

*.js

text/javascript, application/javascript

JavaScript

*.json

application/json

JavaScript Object Notation

*.mp2

audio/mpeg, video/mpeg

MPEG Audio/Video Stream, Layer II

*.mp3

audio/mpeg

MPEG Audio Stream, Layer III

*.mp4

audio/mp4, video/mp4

MPEG-4 Audio/Video

*.mpeg

video/mpeg

MPEG Video Stream, Layer II

*.mpg

video/mpeg

MPEG Video Stream, Layer II

*.mpp

application/vnd.ms-project

MS Project Project

*.ogg

application/ogg, audio/ogg

Ogg Vorbis

*.pdf

application/pdf

Portable Document Format

*.png

image/png

Portable Network Graphics

*.pot

application/vnd.ms-powerpoint

MS PowerPoint Template

*.pps

application/vnd.ms-powerpoint

MS PowerPoint Slideshow

*.ppt

application/vnd.ms-powerpoint

MS PowerPoint Presentation

*.rtf

application/rtf, text/rtf

Rich Text Format

*.svf

image/vnd.svf

Simple Vector Format

*.tif

image/tiff

Tagged Image Format File

*.tiff

image/tiff

Tagged Image Format File

*.txt

text/plain

Plain Text

*.wdb

application/vnd.ms-works

MS Works Database

*.wps

application/vnd.ms-works

Works Text Document

*.xhtml

application/xhtml+xml

Extensible HyperText Markup Language

*.xlc

application/vnd.ms-excel

MS Excel Chart

*.xlm

application/vnd.ms-excel

MS Excel Macro

*.xls

application/vnd.ms-excel

MS Excel Spreadsheet

*.xlt

application/vnd.ms-excel

MS Excel Template

*.xlw

application/vnd.ms-excel

MS Excel Workspace

*.xml

text/xml, application/xml

Extensible Markup Language

*.zip

aplication/zip

Compressed Archive

Layui 上传原型

结果展示