这里实现的是用<input type='file'>元素实现多文件上传
第一步:
html:
input元素加上mutiple属性
<form > <div> <input type="file" id="choose-file" multiple> <a href="javascript:;" id="upload">上传</a> </div> <ul class="file-list"> </ul> </form>
css:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<style> .file-list{ padding: 20px; background: lightblue; list-style-type: none; } .file-list img{ max-width: 70px; vertical-align: middle; } .file-list .file-item{margin-bottom: 10px} .file-list .file-item .file-name{margin-left: 20px} .file-list .file-item .file-del{ color: red; margin-left: 200px;} </style>
第二步:
js:
声明变量
var $button = $('#upload'), //选择文件按钮 $file = $("#choose-file"), //回显的列表 $list = $('.file-list'), //选择要上传的所有文件 fileList = [], sendList = []; //当前选择上传的文件 var curFile ;
选择按钮change事件,实例化fileReader,调它的readAsDataURL并把原生File对象传给它,监听它的onload事件,load完读取的结果就在它的result属性里了。它是一个base64格式的,可直接赋值给一个img的src.
$file.on('change',function(){
//原生的文件对象,相当于$file.get(0).files[0]; curFile = this.files;
//将FileList对象变成数组 fileList = fileList.concat(Array.from(curFile)); for(var i=0,len = curFile.length;i < len;i++){ reviewFile(curFile[i]) } }) function reviewFile(file){
//实例化fileReader, let fd = new FileReader();
//获取当前选择文件的类型 let fileType = file.type;
//调它的readAsDataURL并把原生File对象传给它, fd.readAsDataURL(file);//base64
//监听它的onload事件,load完读取的结果就在它的result属性里了
fd.onload = function(){ if(/^image\/[jpeg|png|jpg|gif]/.test(fileType)){ $list.append('<li class="file-item"><img src="'+this.result+'" alt=""><span class="file-name">'+file.name+'</span><span class="file-del">删除</span></li>') }else{ $list.append('<li class="file-item"><span class="file-name">'+file.name+'</span><span class="file-del">删除</span></li>') } } }
点击删除按钮事件:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
$(".file-list").on('click','.file-del',function(){ let $parent = $(this).parent(); let index = $parent.index(); fileList.splice(index,1); $parent.remove() });
点击上传按钮事件:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
$button.on('click',function(){ if(fileList.length>0){ for(var i=0,len = fileList.length;i < len;i++){ let formData = new FormData(); formData.append('file',fileList[i]); $.ajax({ url:'/oss/file/uploadFiles', type:'post', data:formData, processData:false, contentType:false, success:function(data,statusText,headers){ if(data.success){ var filed = data.data[0]; sendList.push(filed); } } }) } }else{ alert("请选择文件!") } return false; })