首页

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

jQuery实现表单里文字按钮特效合集

25 Apr 2018

这次给大家带来jQuery实现表单里文字按钮特效合集，jQuery实现表单里文字按钮特效的注意事项有哪些，下面就是实战案例，一起来看一下。

jQuery 如何高效地选择具有特定 CSS 属性的元素？

30 Nov 2024

在 jQuery 中选择具有特定 CSS 属性的元素问题：我们如何有效地选择拥有特定 CSS 属性的所有元素...

如何在 jQuery 中捕获鼠标滚轮事件？

26 Oct 2024

在 jQuery 中捕获鼠标滚轮事件 jQuery 提供了一种有效的方法来捕获特定的鼠标滚轮事件，与滚动事件不同。这...

如何使用 jQuery 和 JavaScript 高效解析和显示 JSON 数据？

06 Dec 2024

使用 jQuery 和 JavaScript 解析 JSON 数据这个简短的教程解决了有效操作 JSON 数据的挑战，特别是...

jQuery与Zepto是什么区别

20 Nov 2020

jQuery与Zepto区别：1、添加id时jQuery不会生效而Zepto会生效；2、zepto中没有为原型定义extend方法而jquery有；3、zepto由盒模型决定，而jquery会忽略盒模型。

css3动画和jquery动画有什么区别

28 Apr 2022

css3动画和jquery动画的区别：1、css3可以设置3d动画，jquery不能实现3d动画；2、css的2d矩阵动画效率较高，其他属性动画效率低，jquery利用margin和left、top模拟的矩阵动画效率低，其他属性动画效率高。

jQuery框架概述

26 Aug 2020

1. jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。jQuery库包含以下功能：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities2.jQury优势轻量级、强大...