验证中...
VUE 上传多个附件,显示文件列表,可删除
原始数据 复制代码
<template>
<div class="row">
<form action="/" method="post" id="uploadForm" enctype="multipart/form-data">
<div class="file-box">上传附件
<input type="file" id="files" class="file-btn" name="files" accept="image/x-png,image/gif,image/jpeg,image/bmp" placeholder="file" multiple @change="tirggerFile($event)">
</div>
<input type="button" id="btn_fileUpload" value="fileUpload" @click.prevent="uploadFil">
</form>
<ul class="upload-list">
<li v-for="(file, index) in fileList" class="upload-list-li">
<a class="upload-list-li-name"><i class="fa fa-file-text-o" aria-hidden="true"></i>{{file.name}}</a>
<label class="upload-list-li-label" @click="deleFile(index,file.name)"><i class="fa fa-close"></i></label>
</li>
</ul>
</div>
</template>
<script type="text/javascript">
export default {
name:'upload-file',
data() {
return {
fileList:[]
}
},
methods:{
tirggerFile(event){
var _this=this;
var list=event.target.files;
for(var i=0;i<list.length;i++){
if(_this.fileList.length>=5){
_this.common.showAlert('最多上传5个文件!');
return false;
}else{
_this.fileList.push(list[i]);
}
}
},
deleFile(i,name){
this.fileList.splice(i,1);
},
uploadFil(){
var _this=this;
                var formData=new formData();
for(var i=0;i<this.fileList.length;i++){
_this.formData.append('file',this.fileList[i]);
}
},
}
}
</script>
<style scoped>
.upload-list{margin:0;padding:0;list-style:none;}
.upload-list-li{position: relative;margin-top:5px;line-height: 1.8}
.upload-list-li:hover{background-color: #f5f7fa;}
.upload-list-li-name{position:relative;margin-right: 40px;display: block;}
.fa-file-text-o{margin-right:7px;}
.upload-list-li-label{position:absolute;right:5px;top:0;}
.file-box{
padding:5px 15px;
border-radius:3px;
background-color:#409eff;
border-color:#409eff;
color:#000;display:inline-block;position: relative;
}
.file-btn{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
outline: none;
background-color: transparent;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity: 0;
}
</style>

评论列表( 0 )

你可以在登录后,发表评论

搜索帮助