Yelakelly/README.MD

## README.MD

      
    Raw
  

              README.MD
            
          
    Vue.js - simple multiple file upload


## index.html
<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <div id="app">
            <button class="btn-default" v-on:click="addFile(files)">Добавить файлы</button>
            <button class="btn-default" v-on:click="removeFile()">&#10005;</button>
            <p>
                Количество файлов: {{files}}
            </p>
            <div class="file-wrapper" v-for="file in files">
                <input type="file" name="files[]">
            </div>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

## script.js
var Todo = Vue.extend({
	name: 'app'
});

var vm = new Todo({
  el: '#app',
  data: {
    files: 0
  },
  methods: {
    addFile: function (index) {
        this.files += 1
    },
    removeFile: function (index) {
    	if(this.files){
    		this.files -= 1
    	}
    }
  }
});

## style.css
.btn-default{
    background:#fff;
    border:1px solid #eee;
    border-radius: 5px;
    font-size: 16px;
    padding:0.3em 0.5em;
}

.btn-default:focus{
    outline:none;
}

.btn-error{
    background:#f44336;
    color:#fff;
}

.file-wrapper{
    padding:20px 0px;
}

#app{
    padding:20px;
}
	<!doctype html>
	<html class="no-js" lang="">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
	<!--[if lt IE 8]>
	<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
	<![endif]-->

	<div id="app">
	<button class="btn-default" v-on:click="addFile(files)">Добавить файлы</button>
	<button class="btn-default" v-on:click="removeFile()">✕</button>
	<p>
	Количество файлов: {{files}}
	</p>
	<div class="file-wrapper" v-for="file in files">
	<input type="file" name="files[]">
	</div>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
	<script src="js/main.js"></script>
	</body>
	</html>
	var Todo = Vue.extend({
	name: 'app'
	});

	var vm = new Todo({
	el: '#app',
	data: {
	files: 0
	},
	methods: {
	addFile: function (index) {
	this.files += 1
	},
	removeFile: function (index) {
	if(this.files){
	this.files -= 1
	}
	}
	}
	});
	.btn-default{
	background:#fff;
	border:1px solid #eee;
	border-radius: 5px;
	font-size: 16px;
	padding:0.3em 0.5em;
	}

	.btn-default:focus{
	outline:none;
	}

	.btn-error{
	background:#f44336;
	color:#fff;
	}

	.file-wrapper{
	padding:20px 0px;
	}

	#app{
	padding:20px;
	}