找回密码
 立即注册
快捷导航

[Html/Css/JS] 简略的html上传代码

[复制链接]
seek 7 小时前 | 显示全部楼层
<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Picture Bed</title>
</head>
<body>
    <div style="margin:30px;">
        <div id="fileData">
            <input type="file" accept="image/*">
            <input type="submit" value="Upload" onclick="upload()">
        </div>
        <div id="outData" style="margin-top:30px;word-wrap:break-word;"></div>
    </div>
    <script>
        var state = false;
        var file = null;
        //粘贴事件
        document.addEventListener('paste', function(event) {
            var items = event.clipboardData && event.clipboardData.items;
            if (items && items.length) {
                for (var i = 0; i < items.length; i++) {
                    if (items[i].type.indexOf('image') !== -1) {
                        file = items[i].getAsFile();
                        break;
                    }
                }
                //上传文件
                upload();
            }
        });
        //上传事件
        function upload() {
            if(state == true) {
                alert('正在上传文件');
                return;
            }
            let fileDom = document.querySelector('input[type=file]');
            let submitDom = document.querySelector('input[type=submit]');
            let outDom = document.querySelector('#outData');
            //锁定元素
            state = true;
            submitDom.disabled = true;
            //表单提交文件
            const formData = new FormData();
            if (file == null) file = fileDom.files[0];
            formData.append('file', file);
            var request = new XMLHttpRequest();
            request.onreadystatechange = function(event) {
                if (request.readyState == 4 && request.status == 200) {
                    var resultText = request.responseText;
                    var result = JSON.parse(resultText);
                    var outMsg = "";
                    if (result.state == true) {
                        outMsg = result.data;
                    } else {
                        outMsg = result.msg;
                    }
                    outDom.innerHTML += `${outMsg}<br /><br />`;
                    file = null;
                    state = false;
                    submitDom.disabled = false;
                }
            };
            request.open("POST", "");
            request.send(formData);
        }
    </script>
</body>
</html>
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

温馨提示

关于 注册码 问题

      由于近期经常大量注册机器人注册发送大量广告,本站开启免费入群领取注册码注册网站账号,注册码在群公告上贴着...

关于 注册码 问题

      由于近期经常大量注册机器人注册发送大量广告,本站开启免费入群领取注册码注册网站账号,注册码在群公告上贴着...

Archiver|手机版|小黑屋|DLSite

GMT+8, 2024-11-7 07:40

Powered by Discuz! X3.5 and PHP8

快速回复 返回顶部 返回列表