layui如何對上傳文件進行操作
本篇文章展示了layui對上傳文件的操作，代碼簡明扼要容易理解，如果在日常工作遇到這個疑問。希望大家通過這篇文章，找到解決疑問的辦法。
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、重慶小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了屏南免費建站歡迎大家使用！
單文件上傳
1、HTML
![]()
溫馨提示: 每次最多上傳一張圖片, 單張圖片的大小不超過2MB
2、js部分
layui.use(['form', 'element', 'upload'], function () {
var form = layui.form;
var element = layui.element;
var $ = layui.jquery;
var upload = layui.upload;
//單文件示例 選完文件后不自動上傳
var uploadSingle = upload.render({
elem: '#uploadQR'
, url: '/web/api/upload/upload?option=4'
, accept: 'images' // 允許上傳的文件類型
, size: 2048 // 最大允許上傳的文件大小 單位 KB
, auto: false
, bindAction: '#startUploadQR'
, choose: function (obj) {
//預(yù)讀本地文件示例，不支持ie8
obj.preview(function (index, file, result) {
$('#qrshow').attr('src', result); //圖片鏈接（base64）
});
}
, done: function (res, index, upload) {
if (res.code == 0) {
//上傳成功
$("#qrInput").val(res.data[0].fp_relative);
var startDiv = $('#startDiv');
startDiv.html('上傳成功');
} else {
this.error(index, upload);
}
}
, error: function (index, upload) {
//演示失敗狀態(tài)，并實現(xiàn)重傳
var startDiv = $('#startDiv');
startDiv.html('上傳失敗 重試');
startDiv.find('.demo-reload').on('click', function () {
uploadSingle.upload();
});
}
});
});多圖片的上傳
1、HTML
圖片預(yù)覽 大小 狀態(tài) 操作 溫馨提示: 每次最多上傳六張圖片, 單張圖片的大小不超過5MB, 長寬比例推薦1.5:1, 推薦上傳圖片長675px,寬450px
2、js部分
layui.use(['table', 'form', 'element', 'upload'], function () {
var table = layui.table;
var form = layui.form;
var element = layui.element;
var $ = layui.jquery;
var upload = layui.upload;
//多文件列表示例
var demoListView = $('#imgList');
var totalArray = new Array();
var uploadInst = upload.render({
elem: '#upload' //綁定元素
, url: '/web/api/upload/upload?option=3' //上傳接口
, accept: 'images' // 允許上傳的文件類型
// , acceptMime: 'image/jpg,image/png' // (只支持jpg和png格式，多個用逗號隔開),
, size: 5120 // 最大允許上傳的文件大小 單位 KB
, auto: false //選擇文件后不自動上傳
, bindAction: '#startUpload' //指向一個按鈕觸發(fā)上傳
, multiple: true // 開啟多文件上傳
, number: 6 // 同時上傳文件的最大個數(shù)
, choose: function (obj) {
var files = this.files = obj.pushFile(); //將每次選擇的文件追加到文件隊列
var arr = Object.keys(files);
totalArray = totalArray.concat(arr);
// 檢查上傳文件的個數(shù)
if (totalArray.length <= 6) {
//讀取本地文件
obj.preview(function (index, file, result) {
var tr = $([''
, '
' + (file.size / 1014).toFixed(1) + 'kb '
, '等待上傳 '
, ''
, ''
, ''
, ' '
, ' '].join(''));
//單個重傳
tr.find('.demo-reload').on('click', function () {
obj.upload(index, file);
});
//刪除
tr.find('.demo-delete').on('click', function () {
delete files[index]; //刪除對應(yīng)的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免刪除后出現(xiàn)同名文件不可選
});
demoListView.append(tr);
});
} else {
// 超出上傳最大文件
layer.msg("上傳文件最大不超過6個")
}
}
, done: function (res, index, upload) {
console.log("res", res);
if (res.code == 0) { //上傳成功
// 上傳成功后將圖片路徑拼接到input中，多個路徑用","分割
var inputVal = document.getElementById("imgInput").value;
var valData = "";
if (inputVal) {
valData = inputVal + "," + res.data[0].fp_relative;
} else {
valData = res.data[0].fp_relative;
}
document.getElementById("imgInput").value = valData;
var tr = demoListView.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(2).html('上傳成功');
tds.eq(3).html(''); //清空操作
return delete this.files[index]; //刪除文件隊列已經(jīng)上傳成功的文件
}
this.error(index, upload);
}
, error: function (index, upload) {
var tr = demoListView.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(2).html('上傳失敗');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //顯示重傳
}
});
});添加頁面
添加商鋪
編輯頁面
編輯商鋪
以上就是layui對上傳文件的操作，詳細(xì)使用情況還得要大家自己使用過才能知道具體要領(lǐng)。如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
本文名稱：layui如何對上傳文件進行操作
瀏覽路徑：http://m.jiaotiyi.com/article/gcsehp.html