layUI批量上传文件
生活随笔
收集整理的這篇文章主要介紹了
layUI批量上传文件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<div class="layui-form-item">
<label class="layui-form-label febs-form-item-require">商品輪播圖：</label>
<div class="layui-input-block">
<div class="layui-upload">
<div class="layui-btn" id="commBigPathBtn">輪播圖上傳</div>
<input type="text" name="commBigPath" id="commBigPath" maxlength="2000" autocomplete="off" class="layui-input">
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
<div class="layui-upload-list" id="commBigPathView"></div>
</blockquote>
</div>
</div>
</div> <div class="layui-form-item">
<label class="layui-form-label febs-form-item-require">商品詳情：</label>
<div class="layui-input-block">
<div class="layui-upload">
<div class="layui-btn" id="commDetailsPathBtn">詳情圖上傳</div>
<input type="text" name="commDetailsPath" id="commDetailsPath" maxlength="2000" autocomplete="off" class="layui-input">
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
<div class="layui-upload-list" id="commDetailsPathView"></div>
</blockquote>
</div>
</div>
</div>
//輪播圖片上傳（多圖上傳）
upload.render({
elem: '#commBigPathBtn'
,url: 'comm/comm/import' //此處配置你自己的上傳接口即可
,multiple: true
,acceptMime: 'image/*'
,before: function(obj){
var files = this.files = obj.pushFile(); //將每次選擇的文件追加到文件隊列
//預讀本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#commBigPathView').append('<img style="width: 100px;height: 100px;margin-right: 5px" id="'+index+'" src="'+ result +'" title="'+ file.name +'" class="layui-upload-img"><i class="layui-icon layui-icon-delete" index="'+index+'"></i>')
}); // 刪除圖片
$("#commBigPathView").on("click", "i", function(res){
delete files[$(this).attr("index")]; //刪除對應的文件
$(this).remove();
$("#"+$(this).attr("index")).remove();
});
}
,done: function(res, index){
//如果上傳成功
if(res.code == 200){
debugger
layer.msg('上傳成功',{icon: 1});
var imgpath = $('#commBigPath').val().split(",");
for(var i = 0 ; i < imgpath.length ; i++){
if(imgpath[i]==(res.message)){
imgpath[i] = res.data;
}
}
$('#commBigPath').val(imgpath.toString()); }else{
layer.msg('上傳失敗',{icon: 2});
}
}
}); //詳情圖片上傳（多圖上傳）
upload.render({
elem: '#commDetailsPathBtn'
,url: 'comm/comm/import' //此處配置你自己的上傳接口即可
,multiple: true
,acceptMime: 'image/*'
,before: function(obj){
var files = this.files = obj.pushFile(); //將每次選擇的文件追加到文件隊列
//預讀本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#commDetailsPathView').append('<img style="width: 100px;height: 100px;margin-right: 5px" id="'+index+'" src="'+ result +'" title="'+ file.name +'" class="layui-upload-img"><i class="layui-icon layui-icon-delete" index="'+index+'"></i>') }); // 刪除圖片
$("#commDetailsPathView").on("click", "i", function(res){
delete files[$(this).attr("index")]; //刪除對應的文件
$(this).remove();
$("#"+$(this).attr("index")).remove();
});
}
,done: function(res, index){
//如果上傳成功
if(res.code == 200){
//上傳成功
if($('#commDetailsPath').val()!="" && $('#commDetailsPath').val()!=null){
$('#commDetailsPath').val($('#commDetailsPath').val()+','+file.name);
}else{
$('#commDetailsPath').val(file.name);
}
}else{ layer.msg('上傳失敗',{icon: 2}); } } });
總結
以上是生活随笔為你收集整理的layUI批量上传文件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一文搞懂 GPU 共享方案： NVIDI
- 下一篇： 基于Gazebo/ROS2的智能仓储机器