溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
HTML代碼
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">尾燈名稱</label>
<div class="layui-input-block">
<input type="text" name="name" required lay-verify="required" placeholder="請輸入尾燈名稱" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="button" class="layui-btn" id="upload">
<i class="layui-icon"></i>上傳圖標
</button>
<br><br>
<div >
<img id="preview">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" id="commit" onclick="return false">立即提交</button>
</div>
</div>
</form>
JavaScript代碼
<script>
layui.use(['form', 'layer', 'upload'], function () {
var layer = layui.layer;
var upload = layui.upload;
var $ = layui.jquery;
upload.render({
elem: '#upload',
url: '{:U("addTL")}',
auto: false,//選擇文件后不自動上傳
bindAction: '#commit',
//上傳前的回調
before: function () {
this.data = {
name: $('input[name="name"]').val()
}
},
//選擇文件后的回調
choose: function (obj) {
obj.preview(function (index, file, result) {
$('#preview').attr('src', result);
})
},
//操作成功的回調
done: function (res, index, upload) {
var code = res.code === 0 ? 1 : 2;
layer.alert(res.msg, {icon: code}, function () {
parent.window.location.reload();
})
},
//上傳錯誤回調
error: function (index, upload) {
layer.alert('上傳失敗！' + index);
}
});
})
</script>
以上這篇layui 實現表單和文件上傳一起傳到后臺的例子就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
