零一开源—技术|科技|资源分享
技术分享与兴趣交流
目录
vue.js简单多图上传图片
vue.js简单多图上传图片
页面运行效果图
页面源码
以下源码可直接使用在项目中，当然有些细节需要根据项目需要进行小范围调整
<!DOCTYPE html>
<html>
<head>
<title>vue.js简单多图上传图片</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
ul { list-style: none outside none; margin:0; padding: 0; }
li { margin: 0 10px; display: inline; }
#app{
overflow: hidden;
text-align: center;
margin-top: 10%;
}
img {
width: 100px;
height: 100px;
margin: auto;
display: inline;
margin-bottom: 10px;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<div style="margin-bottom: 20px">
<h2>选择图片</h2>
<a id='addPic' href="" v-on:click="addPic">添加图片 </a>
<input type="file" @change="onFileChange" multiple style="display: none;">
</div>
<div v-if="images.length >0">
<ul>
<li v-for="(item,key) in images">
<img :src="item" @click='delImage(key)' />
<a href="#" style="position: absolute;" @click='delImage(key)'>
<span class="glyphicon glyphicon-remove"></span>
</a>
</li>
</ul>
<button @click="removeImage">移除全部图片</button>
<button @click='uploadImage' >上传</button>
</div>
</div>
<script type="text/javascript">
Vue.config.debug = true;// 开启vue 调试功能
new Vue({
el: '#app',
data: {
images: [],
total:0
},
methods: {
addPic(e){
e.preventDefault();
$('input[type=file]').trigger('click');
return false;
},
onFileChange(e) {
var vm = this;
if(vm.total == 2){
alert('不能超过2张图片');
return false;
}
var files = e.target.files || e.dataTransfer.files;
if (!files.length)return;
this.createImage(files);
vm.total = vm.total + 1;
},
createImage(file) {
if(typeof FileReader==='undefined'){
alert('您的浏览器不支持图片上传，请升级您的浏览器');
return false;
}
var image = new Image();
var vm = this;
var leng=file.length;
for(var i=0;i<leng;i++){
var reader = new FileReader();
reader.readAsDataURL(file[i]);
reader.onload =function(e){
vm.images.push(e.target.result);
};
}
},
delImage:function(index){
var vm = this;
this.images.shift(index);
vm.total = vm.total - 1;
},
removeImage: function(e) {
var vm = this;
this.images = [];
vm.total = 0;
},
uploadImage: function() {
console.log(this.images);
return false;
var obj = {};
obj.images=this.images
$.ajax({
type: 'post',
url: "upload.php",
data: obj,
dataType: "json",
success: function(data) {
if(data.status){
alert(data.msg);
return false;
}else{
alert(data.msg);
return false;
}
}
});
}
}
})
</script>
</body>
</html>
支持
若我的文章对你有帮助，扫描下面小程序赞赏码支持一下吧
微信小程序赞赏码
