You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title > Layui< / title >
< meta name = "renderer" content = "webkit" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1" >
< link rel = "stylesheet" href = "./layui/css/layui.css" media = "all" >
< / head >
< body >
< div class = "layui-upload" >
< button type = "button" class = "layui-btn" id = "uploadButton" > 上传图片< / button >
< div class = "layui-upload-list" >
< img class = "layui-upload-img" id = "previewImg" > <!-- 预览 -->
< p id = "demoText" > < / p >
< / div >
< / div >
<!-- 引入layui -->
< script src = "./layui/layui.js" charset = "utf-8" > < / script >
< script >
layui . use ( [ 'upload' , 'element' , 'layer' ] , function ( ) {
var $ = layui . jquery
, upload = layui . upload
, element = layui . element
, layer = layui . layer ;
//注册上传事件
upload . render ( {
elem : '#uploadButton' //绑定组件对应的事件
, url : 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
, before : function ( obj ) {
//预读本地文件示例，
obj . preview ( function ( index , file , result ) {
$ ( '#previewImg' ) . attr ( 'src' , result ) ; //图片链接（ ）
} ) ;
layer . msg ( '上传中' , { icon : 16 , time : 100 } ) ;
}
, done : function ( res ) {
//如果上传失败
if ( res . code > 0 ) {
return layer . msg ( '上传失败' ) ;
}
//上传成功的一些操作
}
, error : function ( ) {
}
//进度完成
, progress : function ( n , elem , e ) {
if ( n == 100 ) {
layer . msg ( '上传完毕' , { icon : 1 } ) ;
}
}
} ) ;
} ) ;
< / script >
< / body >
< / html >
