图片上传: input type=“file” 学习总结

最新推荐文章于 2024-08-30 14:50:04 发布

Every day is good

最新推荐文章于 2024-08-30 14:50:04 发布

阅读量324

点赞数

分类专栏：工作笔记文章标签：图片上传文件上传 input type=“file” JavaScript web前端开发

工作笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

参考网址:
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file

完整代码:
https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html

代码解析:

<!DOCTYPE html>
<html>

<head>
    <title>Complete file example</title>
    <style>
        html {
            font-family: sans-serif;
        }

        form {
            width: 600px;
            background: #ccc;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid black;
        }

        form ol {
            padding-left: 0;
        }

        form li,
        div>p {
            background: #eee;
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            list-style-type: none;
            border: 1px solid black;
        }

        form img {
            height: 64px;
            order: 1;
        }

        form p {
            line-height: 32px;
            padding-left: 10px;
        }

        form label,
        form button {
            background-color: #7F9CCB;
            padding: 5px 10px;
            border-radius: 5px;
            border: 1px ridge black;
            font-size: 0.8rem;
            height: auto;
        }

        form label:hover,
        form button:hover {
            background-color: #2D5BA3;
            color: white;
        }

        form label:active,
        form button:active {
            background-color: #0D3F8F;
            color: white;
        }
    </style>
</head>

<body>
    <form>
        <div>
            <!-- 关联 input type="file" -->
            <label for="image_uploads">Choose images to upload (PNG, JPG)</label>
            <!-- 图片上传核心 input type="file" -->
            <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple>
        </div>
        <!-- 图片展示区 -->
        <div class="preview">
            <p>No files currently selected for upload</p>
        </div>
        <div>
            <button>Submit</button>
        </div>
    </form>
    <script>
        var input = document.querySelector('input');
        var preview = document.querySelector('.preview');
        // input.style.opacity = 0;
        input.style.display = "none";
        // 监控事件 DOM事件
        input.addEventListener('change', updateImageDisplay);
        function updateImageDisplay() {
            // 清空装图片的盒子
            while (preview.firstChild) {
                preview.removeChild(preview.firstChild);
            }
            var curFiles = input.files;
            // 用户没有选择图片
            if (curFiles.length === 0) {
                // 创建一个p标签
                var para = document.createElement('p');
                // p标签下放一段文字
                para.textContent = 'No files currently selected for upload';
                // preview: 预览
                // 在放图片的div里面增加创建的p元素
                preview.appendChild(para);
            } else {
                // 用户选择了图片
                var list = document.createElement('ol');
                // 在放图片的div里面增加创建的ol元素
                preview.appendChild(list);
                // 用户选择了图片: curFiles.length === 1
                console.log(input.files);
                for (var i = 0; i < curFiles.length; i++) {
                    // 只循环一次
                    var listItem = document.createElement('li');
                    var para = document.createElement('p');
                    // 判断文件格式: 'image/jpeg', 'image/pjpeg', 'image/png'
                    if (validFileType(curFiles[i])) {
                        // curFiles[0]: 是一个对象,如下
                        // 0: File
                        // lastModified: 1562910468592
                        // lastModifiedDate: Fri Jul 12 2019 13: 47: 48 GMT + 0800(中国标准时间) { }
                        // name: "2.jpg"
                        // size: 863778
                        // type: "image/jpeg"
                        // webkitRelativePath: ""
                        // __proto__: File
                        // length: 1
                        // __proto__: FileList

                        // 把kb 转换 mb的自定义函数 returnFileSize()
                        para.textContent = 'File name ' + curFiles[i].name + ', file size ' + returnFileSize(curFiles[i].size) + '.';
                        var image = document.createElement('img');
                        // URL.createObjectURL : 图片curFiles[i]的地址
                        image.src = window.URL.createObjectURL(curFiles[i]);
                        // listItem: 创建的li元素
                        // 把图片 p元素放到li
                        listItem.appendChild(image);
                        listItem.appendChild(para);
                    } else {
                        // 文件格式不对
                        para.textContent = 'File name ' + curFiles[i].name + ': Not a valid file type. Update your selection.';
                        listItem.appendChild(para);
                    }
                    // list 创建的ol
                    list.appendChild(listItem);
                }
            }
        }
        var fileTypes = [
            'image/jpeg',
            'image/pjpeg',
            'image/png'
        ]
        // 判断文件格式: 'image/jpeg', 'image/pjpeg', 'image/png'
        function validFileType(file) {
            for (var i = 0; i < fileTypes.length; i++) {
                if (file.type === fileTypes[i]) {
                    return true;
                }
            }
            return false;
        }
        // 单位转换函数
        function returnFileSize(number) {
            if (number < 1024) {
                return number + 'bytes';
            } else if (number > 1024 && number < 1048576) {
                return (number / 1024).toFixed(1) + 'KB';
            } else if (number > 1048576) {
                return (number / 1048576).toFixed(1) + 'MB';
            }
        }
        // 完结 欢迎纠正 欢迎加QQ: 1361784611
    </script>
</body>

</html>