layui如何實現圖片的上傳以及圖片預覽（純程式碼）
- 不言原創
- 2018-08-13 17:27:0810195瀏覽
這篇文章帶給大家的內容是關於layui如何實現圖片的上傳以及圖片預覽（純程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
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>
<p class="layui-upload">
<button type="button" class="layui-btn" id="choose">选择文件</button>
<p class="layui-upload-list">
<!--预览图片-->
<img class="layui-upload-img" id="demo1">
<!--提示上传信息-->
<p id="demoText"></p>
</p>
<button type="button" class="layui-btn" id="load">上传</button>
</p>
<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>點擊選擇檔案後，選擇圖片，選取的圖片能顯示出來預覽，再點選上傳，即將圖片上傳：
相關推薦：
js如何匯出以及匯入excel？ js導入導出excel的方法（純程式碼）
#以上是layui如何實現圖片的上傳以及圖片預覽（純程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn