vue.js 多圖上傳，並可預覽

Laughing發表於2016-09-09
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="//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);
    }

相關文章