多文件上传

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

 

 

 代码:

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>