
想要达到的效果:点击附件上传,选择多个文件上传,右侧显示上传后的多个文件

代码:
html
<p> <a href="javascript:;" class="fb-adda-hrefa"> 附件上传 <input name="file[]" type="file" id="upbut" onchange="change_file(this)" multiple> </a> </p>
js代码:
<script>
var obj_tip = 1;
var cur_files = [];
var file_names = [];
var file_result;
var j = 0;
function change_file(obj) {
var html = '';
var fileType = ['pdf','PDF','doc','xls','xlsx','png','jpg','jpeg','PNG','JPG','JPEG'];
var num = $('#upbut')[0].files.length;
for (var i=0; i<num;i++){
var file_obj = $('#upbut')[0].files[i];
var file_type = file_obj.name.substring(file_obj.name.indexOf(".")+1);
if (file_obj.size>5*1024*1024) {
alert(file_obj.name+'>5M');
return;
}else if ($.inArray(file_type,fileType) == '-1') {
alert('当前文件格式只支持 pdf,doc,xls,xlsx,png,jpg,jpef');
return;
}else{
file_result = $.inArray(file_obj.name,file_names);
if(file_result ==-1){
file_names.push(file_obj.name);
html += '<span class="fb-adda-spana" onclick="del_file(this,'+j+')">'+file_obj.name+'</span>';
j++;
}
}
}
if ($('#upbut')[0].files && $('#upbut')[0].files.length && file_result ==-1) {
//将对象赋值到可操作属组
Array.prototype.push.apply(cur_files, $('#upbut')[0].files);
// console.log(cur_files);
}
if (html != '') {
$('#upbut').parent().after(html);
}
}
//删除已上传文件
function del_file(obj,id){
if (cur_files.splice(id,1)) {
$(obj).remove();
file_names.splice(id,1)
}
}
</script>