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.
|
|
|
|
|
<!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){
|
|
|
|
|
|
//预读本地文件示例，不支持ie8
|
|
|
|
|
|
obj.preview(function(index, file, result){
|
|
|
|
|
|
$('#previewImg').attr('src', result); //图片链接（base64）
|
|
|
|
|
|
});
|
|
|
|
|
|
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>
|
