<!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="//cdn.bootcss.com/vue/1.0.23/vue.min.js"></script>
<script src="//cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/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="(key,image) in images">
<img :src="image" @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: []
},
methods: {
addPic(e){
e.preventDefault();
$('input[type=file]').trigger('click');
return false;
},
onFileChange(e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length)return;
this.createImage(files);
},
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){
this.images.shift(index);
},
removeImage: function(e) {
this.images = [];
},
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>
PHP 代码
<?php
define('UPLOAD_DIR', './images/');
$img = $_POST['image'];
$start=strpos($img,',');
$img= substr($img,$start+1);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$fileName = UPLOAD_DIR . uniqid() . '.jpg';
$success = file_put_contents($fileName, $data);
$data=array();
if($success){
$data['status']=1;
$data['msg']='上传成功';
echo json_encode($data);
}else{
$data['status']=0;
$data['msg']='系统繁忙，请售后再试';
echo json_encode($data);
}
