首頁

JS特效

jQuery特效

vue-js的圖片批次上傳

現在下載預覽

<頭>
<元字元集=“UTF-8”>
vue.js圖片批次上傳外掛程式
<腳本 src="js/vue2.2.2.js">
<風格>
.upload_warp_img_div_del {
位置：絕對；
頂部：6px；
寬度：16px;
右：4px；
}

.upload_warp_img_div_top {
位置：絕對；
頂部：0；
寬度：100%；
高度：30px；
背景顏色: rgba(0, 0, 0, 0.4);
行高：30px；
文字對齊：左；
顏色：#fff;
字體大小：12px;
文字縮排：4px；
}

.upload_warp_img_div_text {
空白：nowrap;
寬度：80%；
溢出：隱藏；
文字溢出：省略號；
}
.upload_warp_img_div img {
最大寬度: 100%;
最大高度: 100%;
垂直對齊：中間；
}

.upload_warp_img_div {
位置：相對；
高度：100px；
寬度：120px；
邊框：1px實線#ccc;
邊距：0px 30px 10px 0px;
向左飄浮;＃＃＃行高：100px；
顯示：表格單元格；
文字對齊：居中；
背景顏色：#eee;
遊標：指針；
}

.upload_warp_img {
頂部邊框：1px實線#D2D2D2;
填充：14px 0 0 14px;
溢出：隱藏
}

.upload_warp_text {
文字對齊：左；
下邊距：10px;
頂部填充：10px;
文字縮排：14px；
頂部邊框：1px 實線 #ccc;
字體大小：14px;
}

.upload_warp_right {
向左飄浮;＃＃＃寬度：57%；
左邊距: 2%;
高度：100%；
邊框：1px 虛線 #999;
邊框半徑：4px;
行高：130px；
顏色：#999；
}

.upload_warp_left img {
頂部邊距：32px；
}

.upload_warp_left {
向左飄浮;＃＃＃寬度：40%；
高度：100%；
邊框：1px 虛線 #999;
邊框半徑：4px;
遊標：指針；
}

.upload_warp {
邊距：14px；
高度：130px；
}

.上傳{
邊框：1px實線#ccc;
背景顏色：#fff;
寬度：650px；
框陰影：0px 1px 0px #ccc;
邊框半徑：4px;
}

。你好 {＃＃＃寬度：650px；
左邊距：27%；
文字對齊：居中；
}
</風格>
</頭>

<div class="upload_warp_right" @drop="drop($event)" @dragenter="dragenter($event)" @dragover="dragover($event)">
或將文件拖到此處

選取{{imgList.length}}張文件，共{{bytesToSize(this.size)}}

;
<input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none">
<div class="upload_warp_img" v-show="imgList.length!=0">
<div class="upload_warp_img_div" v-for="(item,index) of imgList">
<div class="upload_warp_img_div_top">
<div class="upload_warp_img_div_text">
{{item.file.name}}
</div>

這是一份vue-js的圖片批次上傳，需要的朋友可以下載使用

免責聲明

本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性！本站所有資源僅供學習參考。請不要將它們用於商業目的。否則，一切後果都由您負責！如有侵權，請聯絡我們刪除。聯絡方式：admin@php.cn