贤心制作的一款简洁、优雅的图片/文件上传插件 - layui.upload(让上传更优雅)

介绍

layui 兼容人类正在使用的全部浏览器(IE6/7除外),可作为PC端后台系统与前台界面的速成开发方案。上传模块自 layui 2.0 的版本开始,进行了全面重写,这使得它不再那么单一,它所包含的不仅是更为强劲的功能,还有灵活的UI。任何元素都可以作为上传组件来调用,譬如按钮、图片、普通的DIV等等,而不再是一个单调的file文件域。

代码修饰器加载layui upload模块

下载

layui:http://www.layui.com/

文档:http://www.layui.com/doc/

layui.upload:http://www.layui.com/doc/modules/upload.html

可以在layui官网首页下载layui最新版,

npm安装

npm install layui-src

git仓库下载

你也可以通过 GitHub 或 码云 得到 layui 的完整开发包

引入

<link rel="stylesheet" href="./layui/css/layui.css">
<script src="./layui/layui.js" charset="utf-8"></script>

小试牛刀

将以下代码放入对应html页面即可

这原本知识一个普通的button,正式upload模块赋予了它"文件选择"功能,当然,我们还可随意定义它的样式,而不只是局限于按钮

<button type="button" class="layui-btn" id="test1">
    <i class="layui-icon">&#xe67c;</i>上传图片
</button>
<script>
    layui.use('upload', function(){
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,method:'post'//上传接口的 HTTP 类型,默认post
            ,url: "{:url('lyuiOneUpload')}" //上传接口
            ,accept: 'file' //允许上传的文件类型,可选值有:images(图片)、file(所有文件)、video(视频)、audio(音频)
            ,exts:''//允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时,那么你设置 exts: 'zip|rar|7z' 即代表只允许上传压缩格式的文件。如果 accept 未设定,那么限制的就是图片的文件格式
            ,size: 50 //最大允许上传的文件大小
            ,data: {} //可选项。额外的参数,如:{id: 123, abc: 'xxx'}
            ,before: function(obj){ //obj参数包含的信息,跟 choose回调完全一致,可参见上文。
                layer.load(); //上传loading,
            }
            //回调返回三个参数,分别为:服务端响应信息、当前文件的索引、重新上传的方法
            ,done: function(res, index, upload){
                //上传完毕回调
                layer.closeAll('loading'); //关闭loading
            }
            //当请求上传时出现异常时触发(如网络异常、404/500等)。回调返回三个参数,分别为:当前文件的索引、重新上传的方法
            ,error: function(){
                //请求异常回调
                layer.closeAll('loading'); //关闭loading
            }
        });
    });
</script>

php接口返回JSON数据

{
    "code": 0
    ,"msg": ""
    ,"data": {
        "src": "http://cdn.layui.com/123.jpg"
    }
}

核心方法与基础参数选项

使用 upload 模块必须与 upload.render(options) 方法打交道,其中的 options即为基础参数,它是一个对象。

正如上面例子中ele、accept、exts、size等等

更多支持的参数详见下表,合理的配置它们,应对各式各样的业务需求。

参数选项说明类型默认值
elem指向容器选择器,如:elem: '#id'。也可以是DOM对象string/object-
url服务端上传接口string-
method上传接口的 HTTP 类型stringpost

data

请求上传接口的额外参数object-
accept
指定允许上传的文件类型,可选值有:images(图片)、file(所有文件)、video(视频)、audio(音频)string
images
exts允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时,那么你设置 exts: 'zip|rar|7z' 即代表只允许上传压缩格式的文件。如果 accept 未设定,那么限制的就是图片的文件格式stringjpg|png|gif|bmp|jpeg
auto是否选完文件后自动上传。如果设定 false,那么需要设置 bindAction 参数来指向一个其它按钮提交上传booleantrue
bindAction指向一个按钮触发上传,一般配合 auto: false 来使用。值为选择器或DOM对象,如:bindAction: '#btn'string/object-
field设定文件域的字段名stringfile
size设置文件最大可允许上传的大小,单位 KB。不支持ie8/9number0(即不限制)
multiple是否允许多文件上传。设置 true即可开启。不支持ie8/9booleanfalse
drag是否接受拖拽的文件上传,设置 false 可禁用。不支持ie8/9booleantrue
                                                                                                回调
choose选择文件后的回调函数。返回一个object参数function-
function文件提交上传前的回调。返回一个object参数(同上)function-
done执行上传请求后的回调。返回三个参数,分别为:res(服务端响应信息)、index(当前文件的索引)、upload(重新上传的方法,一般在文件上传失败后使用)。function-
error
执行上传请求出现异常的回调(一般为网络异常、URL 404等)。返回两个参数,分别为:index(当前文件的索引)、upload(重新上传的方法)。function-

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动。

武斌博客 http://www.wubin.pro

Top