Question

我正在尝试将多个文件上传功能添加到我的网站。基本上我有一个按钮＆＃34;添加文件＆＃34;触发并附加可用于上传文档的文件类型的输入字段。

不会触发更改和点击事件。感谢

＆＃13;

files = $('.button-container');
        fileSerialNumber = 1;
        var addFileInputBtn = $('<button class="add-file">+ Add file</button><br><br>')
        files.append(addFileInputBtn)
        addFileInputBtn.click(function (event) {
            event.preventDefault();
            addFileInputBtn.text("+ Add another file")
            var fileBoxContainer = $('<div class="fileBoxContainer"/><br>')
            var fileNameLabel = $('<label style="margin-left: 20px;" for="namefile' + fileSerialNumber + '"> Name: </label>');
            var fileName = $('<input class="file-name" name="namefile' + fileSerialNumber + '" type="text"></input>');
            var rmButton = $("<button class='remove-button' style='color:grey;'><i class='fa fa-times-circle' aria-hidden='true'></i></button>");
            var fileInput = $('<input class="file-input" name="file' + fileSerialNumber + '" type="file"></input>')
            fileBoxContainer.append(fileInput);
            fileBoxContainer.append(fileNameLabel);
            fileBoxContainer.append(fileName);
            fileBoxContainer.append(rmButton);
            files.append(fileBoxContainer);
            debugger
            fileInput.on('change', function () {
                debugger
                var fName = this.value
                fName = fName.replace(/.*[\/\\]/, '');
                fileName.val(fName);
            });

            rmButton.click(function (event) {
                event.preventDefault();
                fileBoxContainer.remove();
            });

            fileSerialNumber += 1;
        })
        $('.remove-button').click(function (event) {
            event.preventDefault();
            $('.fileBoxContainer').remove();
        });

＆＃13;

<html>
<head>
<script src="https://use.fontawesome.com/f65531ab46.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>

<form class="button-container">
</form>
</body>
</html>

＆＃13;

多个文件Uploader jQuery

0 个答案: