html 上传图片显示插件,html5图片文件上传队列插件

特效描述：图片文件 上传队列。html5上传插件制作图片和文件上传队列，支持批量上传，删除代码。 主要功能介绍：1、允许上传文件类型，格式';*.doc;*.pdf'。2、允许上传文件大小(KB)。3、选择文件按钮文案。4、是否允许多文件上传。5、多文件上传时允许的文件数。6、是否展示文件上传说明。7、文件上传说明。8、是否显示文件预览。9、上传文件地址。10、文件filename配置参数。

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

$('#easyContainer').easyUpload({

allowFileTypes: '*.jpg;*.doc;*.pdf',//允许上传文件类型，格式';*.doc;*.pdf'

allowFileSize: 100000,//允许上传文件大小(KB)

selectText: '选择文件',//选择文件按钮文案

multi: true,//是否允许多文件上传

multiNum: 5,//多文件上传时允许的文件数

showNote: true,//是否展示文件上传说明

note: '提示：最多上传5个文件，支持格式为doc、pdf、jpg',//文件上传说明

showPreview: true,//是否显示文件预览

url: '/api/file/upload',//上传文件地址

fileName: 'file',//文件filename配置参数

formParam: {

token: $.cookie('token_cookie')//不需要验证token时可以去掉

},//文件filename以外的配置参数，格式：{key1:value1,key2:value2}

timeout: 30000,//请求超时时间

successFunc: function(res) {

console.log('成功回调', res);

},//上传成功回调函数

errorFunc: function(res) {

console.log('失败回调', res);

},//上传失败回调函数

deleteFunc: function(res) {

console.log('删除回调', res);

}//删除文件回调函数

});