layui上传图片以及图片预览
程序员文章站
2022-04-29 08:18:01
...
1.选择文件后自动上传
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../layui/css/layui.css"/>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常规使用：普通图片上传</legend>
</fieldset>
<div class="layui-upload">
<button type="button" class="layui-btn" id="test1">上传图片</button>
<div class="layui-upload-list">
<!--预览图片-->
<img class="layui-upload-img" id="demo1">
<!--提示上传信息-->
<p id="demoText"></p>
</div>
</div>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script>
layui.use(['upload','jquery'], function(){
var $ = layui.$,
upload = layui.upload;
//普通图片上传
var uploadInst = upload.render({
elem: '#test1'
,url: '/upload/'
,before: function(obj){//文件上传前的回调
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接（base64）直接将图片地址赋值给img的src属性
});
}
,done: function(res){
//如果上传失败
if(res.code > 0){
return layer.msg('上传失败');
}
//上传成功
}
,error: function(){
//演示失败状态，并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
});
</script>
</body>
</html>
图片预览实现，在选择文件后的回调和图片上传前的回调都可以实现：
obj.preview(function(index, file, result){
//index表示文件索引
//file表示文件信息
//result表示文件src地址
$('#demo1').attr('src', result); //图片链接（base64）直接将图片地址赋值给img的src属性
});点击上传图片后，选择图片，直接上传：
2.选择文件后不自动上传，通过按钮触发上传
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../layui/css/layui.css"/>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>常规使用：普通图片上传</legend>
</fieldset>
<div class="layui-upload">
<button type="button" class="layui-btn" id="choose">选择文件</button>
<div class="layui-upload-list">
<!--预览图片-->
<img class="layui-upload-img" id="demo1">
<!--提示上传信息-->
<p id="demoText"></p>
</div>
<button type="button" class="layui-btn" id="load">上传</button>
</div>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script>
layui.use(['upload','jquery'], function(){
var $ = layui.$,
upload = layui.upload;
//普通图片上传
var uploadInst = upload.render({
elem: '#choose'//选择文件的DOM对象
,auto: false //选择文件后不自动上传
,bindAction: '#load' //指向一个按钮触发上传
,url: '/upload/'
,choose:function(obj){//选择文件的回调，obj为选中的文件
//将每次选择的文件追加到文件队列
var files = obj.pushFile();
//预览选中的文件（本地文件）
obj.preview(function(index,file,result){
$('#demo1').attr('src', result);
});
}
,before: function(obj){//文件上传前的回调
}
,done: function(res){
//如果上传失败
if(res.code > 0){
return layer.msg('上传失败');
}
//上传成功
}
,error: function(){
//演示失败状态，并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
});
</script>
</body>
</html>
点击选择文件后，选择图片，选中的图片能展示出来预览，再点击上传，即将图片上传：
上一篇： 零基础打造一款属于自己的网页搜索引擎