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>

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

 

posted @ 2019-04-20 15:37  MR崔  阅读(1355)  评论(0编辑  收藏  举报