多上传进度条

Question

我要用这种形式的进度条进行多次上传 我希望用户能够根据需要添加多张照片 因此使用jQuery的after用户可以添加新的照片输入 问题是我不知道如何添加具有不同名称的新文件输入 当我能够做不同的名字时，我不知道如何为每个文件输入添加不同的功能 这是我的代码，也是我的最后尝试：

<h1>add new post</h1>
<div class="wrapper">
    <form id="form_1"  method="post" enctype="multipart/form-data">
        <div class="input" for="">
            post title
            <input type="text">
        </div>

        <label class="textarea" for="">
            text
            <i class="fas fa-ellipsis-v"></i>
            <textarea name=""  cols="30" rows="10"></textarea>
        </label>
        <button type="button" class="addImg">add photo</button>
        <button type="button"  class="addTxt">add text</button>
        <div class="wrapper2">
            <div class="wrapper3">
                <div class='input3'><p>main photo</p>
                    <div class='customFile'>
                        <input type='file' name="mainImg" id="mainImg">
                        <div class='customDiv'><i class='far fa-images'></i></div>
                        </div>
<!--                    <div class="barH" id="progressBar"><div class="bar"></div></div>-->
                    <progress class="progressBar" id="progressBar" value="0" max="100"></progress>
                    </div>
                <div class="input2" for="">
                    date
                    <input type="datetime-local">
                </div>
                <div class="input2" for="">
                    category
                    <select name="" id="">
                        <option value="">sport</option>
                    </select>
                </div>
                <div class="check">
                    active
                    <input checked type="checkbox">
                </div>
                <input type="submit" value="submit">
            </div>
        </div>
    </form>
</div>
<script>
    $(".progressBar").slideUp(0);
    $(document).ready(function () {
    $(".container .wrapper form").on("click", "label i:first-child", function () {
        $(this).parent("label").toggleClass("activeLabel");
    });
    $(".wrapper form").on("click", "label i:nth-child(2)", function () {
        $(this).parent("label").remove();
    });
        function progressHandler(event)
        {
            var percent= (event.loaded / event.total) * 100;
            document.getElementById("progressBar").value=Math.round(percent);
        }
        function completeHandler()
        {
            document.getElementById("progressBar").value=100;
            // $(".input3 .progressBar").slideUp(100);
        }
        $(".input").on('change','div input',function() {
            $(this).parent(".customFile").slideUp(100);
            $(this).parent(".customFile").parent(".input3").children(".progressBar").slideDown(100);
            var file=document.getElementById("newImg").files[0];
            alert(file.name);
            var formData = new FormData();
            formData.append("newImg",file);
            var ajax= new XMLHttpRequest();
            ajax.upload.addEventListener("progress",progressHandler, false);
            ajax.addEventListener("load",completeHandler, false);
            ajax.open("POST","test.php");
            ajax.send(formData);
        });
        $(".input3").on('change','div input',function() {
            $(this).parent(".customFile").slideUp(100);
            $(this).parent(".customFile").parent(".input3").children(".progressBar").slideDown(100);
            var file=document.getElementById("mainImg").files[0];
            var formData = new FormData();
            formData.append("mainImg",file);
            var ajax= new XMLHttpRequest();
            ajax.upload.addEventListener("progress",progressHandler, false);
            ajax.addEventListener("load",completeHandler, false);
            // ajax.addEventListener("error",errorHandler, false);
            // ajax.addEventListener("abort",abortHandler, false);
            ajax.open("POST","test.php");
            ajax.send(formData);
        });
        $(".addImg").click(function () {
            $("label:last").after("<label class='input' for=''>photo" +
                "<i class='fas fa-ellipsis-v'></i>" +
                "<i class='fas fa-times'></i>" +
                "<div class='customFile'>" +
                "<input name='newImg' id='newImg' type='file'>" +
                "<div class='customDiv'><i class='far fa-images'></i></div>" +
                "</div> " +
                "<progress class='progressBar' id='progressBar2' value='0' max='100'></progress></label>");
            $("label").not(":last").addClass("activeLabel");
        });
        $(".addTxt").click(function () {
            $("label:last").after("" +
                "<label class='textarea' for=''>text" +
                "<i class='fas fa-ellipsis-v'></i>" +
                "<i class='fas fa-times'></i>" +
                "<textarea cols='30' rows='10'></textarea>" +
                "</label>");
            $("label").not(":last").addClass("activeLabel");
        });
    });
</script>

Answer 1

在此处http://hayageek.com/jquery-multiple-file-upload/

我希望这段代码对您有所帮助