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>
  • 相关阅读:
    设计说明书 转
    软件项目详细设计文档规范
    记帐凭证怎样分类?
    Delphi中WideString类型如何转化成String类型
    更靠谱的横竖屏检测方法
    超级小的web手势库AlloyFinger发布
    狗日的rem
    js 面试的坑
    【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
    移动端 关于 键盘将input 框 顶上去的解决思路---个人见解
  • 原文地址:https://www.cnblogs.com/fpcing/p/7562345.html
Copyright © 2011-2022 走看看