html编写文件上传自定义图片背景

使用html编写文件上传自定义图片背景，点击左侧的文件夹背景（弹出系统文件选择框），中间为文字输入框，右侧为发送按钮，成品如下：

1.编写一个带有文件输入样式的外部框架

选择文件后自动提交表单到服务器端的upload.php文件,首先在外部写下这样一个容器框架

<div action="upload.php" method="post" enctype="multipart/form-data">
</div>

2.编写一个输入框

在输入框内，水平分布文件输入框、文本输入款、发送按钮，代码如下

<div action="upload.php" method="post" enctype="multipart/form-data">
    <div class="talk_input">
        <select class="whotalk" id="who">
            <option value="1"></option>
        </select>
        <div class="chat-input-container">
{#            文件输入#}
            <label for="file" style="font-weight: bold;" id="loadInput">
                <div>
                    <!-- 使用CSS隐藏或取消选择文件的提示文字 -->
                    <input type="file" name="file"  id="fileInput" accept=" .doc, .docx, .txt" required>
                </div>
                <div>
                    <input type="hidden" name="MAX_FILE_SIZE" value="5*1024*1024">
                </div>
                <!-- 限定文件大小为5MB -->
            </label>
            <div class="" id="download">
            </div>
{#            文字输入#}
            <div id="talkwords" class="chat-word talk_word" contenteditable="true"></div>
{#            发送#}
            <input type="button" class="talk_sub" id="talksub" onclick="sendMsg()">
        </div>
    </div>
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</div>

3.样式添加

主要是文件上传的样式添加，使用CSS隐藏或取消选择文件的提示文字

#fileInput {
    position: relative;
    overflow: hidden; /* 确保文本不显示 */
    /* 设置背景图 */
    background-image: url('/static/images/file.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    /* 隐藏默认的文件选择按钮文本 */
    color: transparent;
    /* 移除文本框的边框 */
    border: none !important;
    /* 设置文件选择按钮的尺寸 */
    width: 40px;
    height: 40px;
    /* 隐藏文件选择框的默认文本框 */
    text-indent: -9999px;
    /* 使背景图覆盖整个按钮 */
    z-index: 1;
}

/* 隐藏文件选择框的默认浏览按钮 */
#fileInput::-webkit-file-upload-button {
    visibility: hidden;
    border: none;
}

4.添加文件上传的方法

点击图片，弹出选择文件框，确定选择文件

添加事件监听器来监听文件输入框的change事件，并在用户选择文件后执行发送文件的操作，中间添加了一写我的文件上传自定义方法，可能有很多大家都不适用，可以自定义实现：

document.addEventListener('DOMContentLoaded', function() {
    // 获取文件输入框的DOM元素
    var fileInput = document.getElementById('fileInput');

    // 为文件输入框添加change事件监听器
    fileInput.addEventListener('change', function(event) {

            deleFile()
    var fileInput = $("#fileInput")[0];
    var file = fileInput.files[0];
    fileload = file

    if (file) {
        var fileType = getFileType(file);
        if (!allowedFileType(fileType)) {
            document.getElementById("contendload").textContent = "不支持上传该文件类型"
            document.getElementById("loadno").style.display = "block";
            setTimeout(function () {
                document.getElementById("loadno").style.display = "none";
            }, 4000); //
            return; // 不执行上传操作
        }
        var maxSize = getMaxFileSize(fileType);
        // 限定文件大小
        if (file.size > maxSize) { // 5MB
            document.getElementById("contendload").textContent = "文件大小超过限制（" + formatFileSize(maxSize) + "）";
            document.getElementById("loadno").style.display = "block";
            setTimeout(function () {
                document.getElementById("loadno").style.display = "none";
            }, 4000); //
            return; // 不执行上传操作
        }

        function getFileType(file) {
            var fileExtension = file.name.split('.').pop().toLowerCase();
            return fileExtension;
        }

        function allowedFileType(fileType) {
            var allowedExtensions = ["doc", "docx"];
            return allowedExtensions.includes(fileType);
        }

        function getMaxFileSize(fileType) {
            var sizeMap = {
                "doc": 2 * 1024 * 1024,  // 2MB
                "docx": 2 * 1024 * 1024, // 2MB
            };
            return sizeMap[fileType] || 5242880; // 默认为 5MB
        }

        function formatFileSize(bytes) {
            if (bytes >= 1073741824) {
                return (bytes / 1073741824).toFixed(2) + " GB";
            } else if (bytes >= 1048576) {
                return (bytes / 1048576).toFixed(2) + " MB";
            } else if (bytes >= 1024) {
                return (bytes / 1024).toFixed(2) + " KB";
            } else {
                return bytes + " bytes";
            }
        }

        // 创建 FormData 对象，用于构建 multipart/form-data 请求
        var formData = new FormData();
        formData.append("userid", uniqueId)
        formData.append("file", file);
        $.ajax({
            // url: "http://49.232.249.233:8800/docs",
            url: "/docs",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            xhr: function () {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener("progress", function (e) {
                    if (e.lengthComputable) {
                        var percentComplete = (e.loaded / e.total) * 100;
                        var progressBar = document.getElementById("progress-bar");
                        var currentWidth = parseFloat(progressBar.style.width) || 0;

                        // 模拟延迟，每100毫秒增加1%
                        var increment = 100;
                        var interval = 10;
                        var targetWidth = currentWidth + increment;
                        var step = (targetWidth - currentWidth) / (1000 / interval);

                        var animate = function () {
                            if (currentWidth < targetWidth) {
                                currentWidth += step;
                                progressBar.style.width = currentWidth + "%";
                                setTimeout(animate, interval);
                            }
                        };

                        animate();
                    }
                }, false);
                return xhr;
            },
            success: function (data) {
                console.log(data)
                fileandfile = 1
                if (data.message === 200) {
                    // 处理上传成功的情况
                    console.log("上传成功");
                    setTimeout(function () {
                        showCompletionIndicator();
                        document.getElementById("loadthis").style.display = "block";
                    }, 500); //
                    setTimeout(function () {
                        document.getElementById("loadthis").style.display = "none";
                    }, 2000); //

                } else {
                    console.error("请求错误:");
                    document.getElementById("contendload").textContent = "上传错误，网络错误"
                    setTimeout(function () {
                        document.getElementById("loadno").style.display = "block";
                    }, 500); //
                    setTimeout(function () {
                        document.getElementById("loadno").style.display = "none";
                    }, 4000); //
                }
            },
            error: function (error) {
                // 处理请求错误
                console.error("请求错误:", error);
                document.getElementById("contendload").textContent = "上传错误，网络错误"
                setTimeout(function () {
                    document.getElementById("loadno").style.display = "block";
                }, 500); //
                setTimeout(function () {
                    document.getElementById("loadno").style.display = "none";
                }, 4000); //
            }
        });
    } else {
        document.getElementById("contendload").textContent = "上传文档为空，请选择文件"
        document.getElementById("loadno").style.display = "block";
        setTimeout(function () {
            document.getElementById("loadno").style.display = "none";
        }, 4000); //
    }

    });
});

5.结束

以上就是我的屎山代码啦，全是div哈哈哈，欢迎各位大佬指教！