<!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="///vue/1.0.23/vue.min.js"></script><script src="///jquery/2.2.2/jquery.min.js"></script><!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="///bootstrap/3.3.5/css/bootstrap.min.css"><!-- 可选的Bootstrap主题文件（一般不用引入） --><link rel="stylesheet" href="///bootstrap/3.3.5/css/bootstrap-theme.min.css"><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="///jquery/1.11.3/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="///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 代码
<?phpdefine('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);}
