当前位置：首页 > 下载站 > js特效 > jQuery特效 > vue-js的图片批量上传

vue-js的图片批量上传

分类: js特效 / jQuery特效	发布时间: 2018-01-05	访问量: 2056
下载量: 53

点击下载预览效果

更多>

最新下载

app网页步骤引导实例代码

jQuery tourguide.js 插件制作手机网页步骤引导提示，遮罩弹窗步骤引导介绍使用，支持下一步提示效果。可用于手机app，新版手机端页面使用步骤引导特效。

0 2026-01-02

简洁实用的jQuery表单验证代码

简洁实用的jQuery表单验证代码是一款适合网站做用户注册表单特效。

0 2026-01-02

CSS3悬停遮罩显示文字特效

CSS3悬停遮罩显示文字特效，总共有3款图片悬停遮罩文字效果，分别为圆形图片，六角形图片，五角形图片悬停遮罩动画特效。

0 2026-01-02

CSS3点击图片切换到下一张代码

纯CSS3铁轨上列车动画特效是一款点击第一张图片切换下一张图片展示特效。适用于手机端图片查看下一张代码。

0 2026-01-02

带网上开户表单jQuery焦点图

带网上开户表单jQuery焦点图是一款适合证券公司的带表单的图片左右滚动切换特效代码。

0 2026-01-02

社交图文卡片ui响应式布局

一款简洁响应式的社交图文列表，图文介绍卡片式ui布局代码。可用于相册图片，产品图片介绍展示特效。

0 2026-01-02

24小时阅读排行榜

更多>

最新教程

最新Python教程从入门到精通

Node.js 教程

14937 2025-08-28
CSS3 教程

1542791 2025-08-27
Rust 教程

22453 2025-08-27
Vue 教程

24898 2025-08-22
PostgreSQL 教程

21566 2025-08-21
Git 教程

8618 2025-08-21

vue-js的图片批量上传

<head>
<meta charset="UTF-8">
<title>vue.js图片批量上传插件</title>
<script src="js/vue2.2.2.js"></script>
<style>
.upload_warp_img_div_del {
position: absolute;
top: 6px;
width: 16px;
right: 4px;
}

.upload_warp_img_div_top {
position: absolute;
top: 0;
width: 100%;
height: 30px;
background-color: rgba(0, 0, 0, 0.4);
line-height: 30px;
text-align: left;
color: #fff;
font-size: 12px;
text-indent: 4px;
}

.upload_warp_img_div_text {
white-space: nowrap;
width: 80%;
overflow: hidden;
text-overflow: ellipsis;
}
.upload_warp_img_div img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}

.upload_warp_img_div {
position: relative;
height: 100px;
width: 120px;
border: 1px solid #ccc;
margin: 0px 30px 10px 0px;
float: left;
line-height: 100px;
display: table-cell;
text-align: center;
background-color: #eee;
cursor: pointer;
}

.upload_warp_img {
border-top: 1px solid #D2D2D2;
padding: 14px 0 0 14px;
overflow: hidden
}

.upload_warp_text {
text-align: left;
margin-bottom: 10px;
padding-top: 10px;
text-indent: 14px;
border-top: 1px solid #ccc;
font-size: 14px;
}

.upload_warp_right {
float: left;
width: 57%;
margin-left: 2%;
height: 100%;
border: 1px dashed #999;
border-radius: 4px;
line-height: 130px;
color: #999;
}

.upload_warp_left img {
margin-top: 32px;
}

.upload_warp_left {
float: left;
width: 40%;
height: 100%;
border: 1px dashed #999;
border-radius: 4px;
cursor: pointer;
}

.upload_warp {
margin: 14px;
height: 130px;
}

.upload {
border: 1px solid #ccc;
background-color: #fff;
width: 650px;
box-shadow: 0px 1px 0px #ccc;
border-radius: 4px;
}

.hello {
width: 650px;
margin-left: 27%;
text-align: center;
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div id="app">
<div class="hello">
<div class="upload">
<div class="upload_warp">
<div class="upload_warp_left" @click="fileClick">
<img src="./upload.png">
</div>
<div class="upload_warp_right" @drop="drop($event)" @dragenter="dragenter($event)" @dragover="dragover($event)">
或者将文件拖到此处
</div>
</div>
<div class="upload_warp_text">
选中{{imgList.length}}张文件，共{{bytesToSize(this.size)}}
</div>
<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>