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

        var fileLists = []
        $('#label').click(function(){
            // var inputBefore = document.getElementById('inputBefore');
             var $input = $("#myFile");
            console.log(111)
            $input.on('change',function(){
                var files =this.files; //filelist
                files = Array.prototype.slice.call(files); //全部转化为数组
                fileLists = fileLists.concat(files);
                //显示文件名面板
                console.log(11)
                if (files.length !== 0) {
                    console.log(111)
                    var html = '';
                    for (var i = 0; i < files.length; i++) {
                        html += "<li><span>" + files[i].name + "</span>&nbsp&nbsp<span>"+"删除</span></li>";
                    }
                    $('.upload_ul').append(html);
                }
            })
            $input.removeAttr("id");
            // // // 我们做个标记,再class中再添加一个类名就叫uploadImg
            var newInput = '<input class="uploadImg" type="file"  id="myFile">';
            $(this).append($(newInput));
        })
    <div class="file_upload">
                        <label id="label">
                            <!-- 上传文件 -->
                            <input type="file" multiple id="myFile">
                        </label>
                        <span class="no_file">未选择文件</span>
                        <ul class="upload_ul">
                        </ul>
                    </div>

    类似多张上传图片,可以添加重复文件

  • 相关阅读:
    复习 层叠样式表
    asp后台练习总结
    序列化
    WindowsForm 增 删 查 改
    WindowsForm 计算器
    UML建模和开发预演
    rabbitmq 使用心得
    设计模式之策略模式
    单一职责原则
    设计模式之工厂模式
  • 原文地址:https://www.cnblogs.com/MR-cui/p/10741148.html
Copyright © 2011-2022 走看看