vue多圖上傳以及預覽
阿新 • • 發佈：2018-12-21
<!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); }