正在上载多个文件

2024-09-29 23:16:52 发布

您现在位置:Python中文网/ 问答频道 /正文

我正在尝试使用Flask、HTML和JS上传多个文件。 但是,当我试图在烧瓶路径中检索它们的名称时,如果列表为空,则返回该列表

这是烧瓶路径(命名为上载):

@app.route("/upload", methods=["POST", "GET"])
def upload():
    if request.method == "POST":
        return str(request.files)

然后在mu upload.html中,我有以下脚本:

<form action="" method="POST" enctype="multipart/form-data">
        <div style="padding-left: 7%">
            <div class="file-upload">
                <input class="file-upload__input" type="file" name="files" id="files" multiple>
                <button class="file-upload__button" type="button">Choose File(s)</button>
                <span class="file-upload__label" style="color: white">No file(s) selected</span>
            </div>
            <script>
                Array.prototype.forEach.call(
                    document.querySelectorAll(".file-upload__button"),
                    function(button) {
                        const hiddenInput = button.parentElement.querySelector(
                            ".file-upload__input"
                            );
                        const label = button.parentElement.querySelector(".file-upload__label");
                        const defaultLabelText = "No file(s) selected";

            // Set default text for label
            label.textContent = defaultLabelText;
            label.title = defaultLabelText;

            button.addEventListener("click", function() {
                hiddenInput.click();
            });

            hiddenInput.addEventListener("change", function() {
                const filenameList = Array.prototype.map.call(hiddenInput.files, function(
                    file
                    ) {
                    return file.name;
                });

                label.textContent = filenameList.join(", ") || defaultLabelText;
                label.title = label.textContent;
            });
        }
        );
    </script>
<div style="padding-top: 75px; padding-left: 7%; padding-bottom: 10%">
    <input type="submit" value="Save to Cloud" name="submit" class="file-upload__button">
</div >
</form>

当我启动它并且方法是POST时,我有以下输出:enter image description here

我怎样才能访问我上传的文件名

这就是我的界面的样子:

enter image description here

enter image description here

更新:

当我在return之前执行print(request.files)时,我得到:

ImmutableMultiDict([('files', <FileStorage: 'test.csv' ('text/csv')>)]) 

其中test.csv确实是文件的正确名称

如果你知道我做错了什么,请告诉我


Tags: divinputrequestfunctionbuttonfilespostlabel

热门问题