zoukankan      html  css  js  c++  java
  • 多文件上传

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

     代码:

    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>
  • 相关阅读:
    JZOJ 3845. 简单题(simple)
    JZOJ 3844. 统计损失(count)
    JZOJ 3843. 寻找羔羊(agnus)
    JZOJ 3833. 平坦的折线
    JZOJ 1956. 矩形
    JZOJ 3832. 在哪里建酿酒厂
    mysql 语法一 :case when详解
    阿里云推荐码
    redis配置文件详解(转)
    压力测试工具 webbench总结
  • 原文地址:https://www.cnblogs.com/fpcing/p/7562345.html
Copyright © 2011-2022 走看看